使用props / $emit实现Vue组件间通信

Vue组件间通信可分为:

• 父子组件之间通信
• 非父子组件之间通信(兄弟组件、隔代关系组件等)

父组件通过props的方式向子组件传递数据，而 子组件可以通过$emit向父组件通信 

1.父组件向子组件传值

//App.vue父组件
<template>
  <div>
    <Student name='红小豆' sex='男' :age=3 />
  </div>
</template>

<script>
import Student from "./components/Student";

export default {
  name: "App",
  components: { Student }
}
</script>

//Student子组件
<template>
  <div>
    <h2>学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
    <h2>学生年龄:{{Myage+1}}</h2>
  </div>
</template>

<script>
export default {
    name:'Student',
    data(){
      return{
        msg:"我是一颗蛋",
        Myage:this.age
      }
    },
    methods:{
      updateAge() {
        this.Myage ++
      },
    },
    // props:['name','age','sex'] //简单声明接收

    //接收的同时对数据进行类型限制
    // props:{
    //   name:String,
    //   age:Number,
    //   sex:String
    // }

    props:{
      name:{
        type:String,  //name的类型是字符串
        required:true //name是必要的
      },
      age:{
        type:Number,
        default:99 //默认值
      },
      sex:{
        type:String,
        require:99
      }
    }
}
</script>

注意:props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，需复制props的内容到data中一份，然后去修改data中的数据

2.子组件向父组件传值

//App.vue父组件
<template>
  <div class="app">
    <h1>{{msg}},学生姓名是:{{studentName}}</h1>
     <!-- 通过绑定一个自定义事件实现: 子给父传递数据 (第一种写法,使用@或v-on)-->
   <Student v-on:atdanzai='demo'/>
   <!-- 通过绑定一个自定义事件实现: 子给父传递数据 (第二种写法, 使用ref)-->
    <Student ref="student"/> 
  </div>
</template>

<script>
import Student from "./components/Student";

export default {
  name: "App",
  components: { Student },
  data(){
    return {
      msg:'你好啊',
      studentName:''
    }
  },
  methods:{
    demo(name){
      console.log('App收到了学生名:',name);
      this.studentName = name;
    }
  },
  mounted(){
    this.$refs.student.$on('atdanzai',this.demo) //绑定自定义事件
    // 注意：通过this.$refs.xxx.$on('atdanzai',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题
  }
}
</script>

<style>
  .app{
    background-color: gray;
  }
</style>

//Student.vue子组件
<template>
  <div class="student">
    <h2>学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
    <h2>当前求和为: {{number}}</h2>
    <button @click="add">点我number++</button>
    <button @click="sendStudentName">把学生名给App</button>
    <button @click='unbind'>解绑atdanzai事件</button>
    <button @click='death'>销毁当前Student组件的实例(vc)</button>
  </div>
</template>

<script>
export default {
    name:'Student',
    data(){
      return{
        name:"红小豆",
        sex:'男',
        number:0
      }
    },
    methods:{
      add(){
        console.log('add回调被调用了');
        this.number++
      },
      sendStudentName(){
        //触发Student组件实例身上的atdanzai事件
        this.$emit('atdanzai',this.name)
        // this.$emit('demo')
      },
      unbind(){
        // this.$off('atdanzai') //解绑一个自定义事件
        // this.$off(['atdanzai','demo']) //解绑多个自定义事件
        this.$off() //解绑所有自定义事件
      },
      death(){
        this.$destroy() //销毁了当前Student组件的实例, 销毁后所有Student实例的自定义事件全都不奏效
      }
    }
}
</script>

<style scoped lang='scss'>
  .student{
    background-color: pink;
    padding:5px;
    margin-top: 30px;;
  }
</style>