vue组件与组件间传值

vue的组件往往是多层级的，要实现组件与组件间的数据传递也有很多方法。
这里只记录用props实现和用自定义事件实现的方法。
下面代码中student与school组件为姐妹组件，有着共同父组件app。

• 父组件向子组件传递消息用props

父app中的模板，普通传值

  <school name='AppName' number='女' ></school>

子school中接收

data(){
        return{
         address: "北京",
          msg:'hello'
    }},
 props: ['name','number']//通过this.name使用

• 姐妹组件通过父组件通信。

app中增加回调函数。
将函数传给子组件，

<template>
    <div>
        <school name='AppName' number='女' :receive='receive' ></school>
        <hr>
        <student :schoolmsg='schoolmsg'></student>
        <!-- 普通属性只能传递普通string，:属性名=''后面才能识别表达式 -->
    </div>
</template>

<script>
    import school from "./components/school";
    import student from './components/student';
    export default {
    name: 'App',
    data() {
        return {
            schoolmsg: [],
        };
    },
    components: {
        school,student
        },//注册组件
        methods: {
          receive(x){//函数中增加可以传递的变量
              console.log('app收到了数据：',[x]);
              this.schoolmsg=[x];
        
          }
        },
};

</script>

school组件中接收父组件值，调用父组件回调函数，并传参

<template>
  <div>
    <button @click="to_data">点击传值</button>
  </div>
</template>

<script>
export default {
   data(){
        return{
         address: "北京",
          msg:'hello'
    }},
  props: ['receive'],
  methods: {
     to_data(){
       this.receive(this.name+this.address+this.msg);
 }},};
</script>

student组件中接收父组件的值，取出姐妹组件信息

<template>
    <div>
        <h2>学生:{{name}}</h2>
        <button @click="showSchool">点击查看学校</button>  
    </div>
</template>

<script>
export default {
    data() {
        return {
            name:'a student',
            age:23
        }; },props:['schoolmsg'],
       methods: {
       showSchool(){
           console.log(this.schoolmsg);
       }
    }}
    

• 通过自定义事件实现绑定

app中绑定为子组件绑定事件

  <student v-on:sendName="getName"></student>
        <!-- 第一种，绑定方法用v-on为组件添加监听事件sendName，而不是传递回调函数 -->

  <student ref='s' @click="getName"></student>
         <!-- 第二种绑定方法，通过ref
         可以通过vue.$ref.s拿到真实dom再通过.$on绑定事件监听  -->

js下的方法

   methods: {
       getName(x){ 
              console.log('收到了student名字',x);
              this.student_name=x;}
          },
          mounted() {
             console.log('挂载完毕');
             this.$refs.s.$on('sendName',this.getName);
             //这个为第二种ref绑定方法，请在挂载结束后绑定
          }

sudent中触发事件，以及销毁事件和解绑事件方法

 <button @click="send_student">将名字传给app</button>
        <button @click="unbind">解绑事件</button>
        <button @click="destroy">销毁事件</button>

js方法

methods: {
      send_student(){
          this.$emit("sendName",this.name);//触发绑定过的事件
      },unbind () {
          this.$off()//解绑全部
          //this.$off(['a','b'])//解绑多个
      },destroy(){
            this.$destroy()//销毁了当前组件的实例，销毁后自定义事件全都不奏效
      }}