初学Vue（全家桶）-第13天（vue2）：组件自定义事件实现组件间通信

初学vue

组件自定义事件实现组件间通信

前面学习了props配置项可以轻松实现父传数据给子组件的功能，但同级组件传数据与子组件传数据给父组件稍微麻烦点。

子传父的实现方式是：在父组件中定义一个函数，再使用组件标签将这个函数通过props传递给子组件接收，子组件接收后调用这个函数，并将自身的数据传递过去。

同级组件通信的前提是使用公共的父组件传给一个子组件一个方法，然后该子组件调用这个方法来将自身的数据传给父组件，父组件接收到数据后，将数据继续传给需要该数据的组件，同样用props接收。

下面讲的通过$emit实现组件间通信就简单一点。

例如，我们要让父组件接收从子组件传来的数据并打印出来。

1、使用props实现方式如下

App.vue

<template>
  <div id="app">
    <Son1 :getNameOfSon1="getNameOfSon1"></Son1>
  </div>
</template>

<script>
import Son1 from "./components/Son1.vue"

export default {
  name:"App",
  components:{Son1},
  methods:{
    getNameOfSon1(name,age){
      console.log("App拿到了从Son1传递过来的值",name,age);
    }
  }
}
</script>

<style>
  #app{
    background-color: grey;
  }
</style>

son1.vue

<template>
  <div class="son1">
      <h3>姓名:{{name}}</h3>
      <h3>年龄:{{age}}</h3>
      <button @click="sendMsgToApp">点我把son1中的数据传给app</button>
  </div>
</template>

<script>
export default {
    name:"Son1",
    props:['getNameOfSon1'],
    data(){
        return {
            name:"张三",
            age:21
        }
    },
    methods:{
        sendMsgToApp(){
            this.getNameOfSon1(this.name,this.age)
        }
    }
}
</script>

<style>
    .son1{
        background-color: lightgreen;
    }
</style>

这种方式的主要思路是：父组件中定义一个方法，在组件标签中将这个方法传给子组件，子组件利用props接收后，受某个事件触发后可以通过this调用传过来的这个方法，实现子组件传递数据给父组件。

---

2、组件自定义事件实现组件间通信

2.1 方式一：组件标签中使用@或者v-on绑定事件实现通讯

• App.vue

<template>
  <div id="app">
    <Son2 @event1="getNameOfSon2"></Son2>
  </div>
</template>

<script>
import Son2 from "./components/Son2.vue"
export default {
  name:"App",
  components:{Son2},
  methods:{
    getNameOfSon2(name,age){
      console.log("App拿到了从Son2传递过来的值",name,age);
    }
  }
}
</script>

<style>
  #app{
    background-color: grey;
  }
</style>

• son2.vue

<template>
  <div class="son2">
      <h3>姓名:{{name}}</h3>
      <h3>年龄:{{age}}</h3>
      <button @click="sendMsgToApp">点我把son2中的数据传给app</button>
  </div>
</template>

<script>
export default {
    name:"son2",
    data(){
        return {
            name:"李四",
            age:"22"
        }
    },
    methods:{
        sendMsgToApp(){
            this.$emit("event1",this.name,this.age)
        }
    }
}
</script>

<style>
    .son2{
        background-color: skyblue;
    }
</style>

这种方式的主要思路是：子组件中的事件被触发后，通过this.$emit触发父组件中对应组件标签上绑定的自定义事件，该事件上绑定了调用的方法。其实相当于子组件间接触发了父组件标签元素上绑定的事件。

---

2.2 方式二：通过$refs（+$on+$emit）实现通信

• App.vue

<template>
  <div id="app">
    <Son3 ref="son3"></Son3>
  </div>
</template>

<script>
import Son3 from "./components/Son3.vue"
export default {
  name:"App",
  components:{Son3},
  methods:{
    getNameOfSon3(name,age){
      console.log("App拿到了从Son3传递过来的值",name,age);
    }
  },
  mounted(){
  // 通过this.$refs.son3拿到组件实例vc，通过$on绑定到vc上
    this.$refs.son3.$on("event2",this.getNameOfSon3)
  }
}
</script>

<style>
  #app{
    background-color: grey;
  }
</style>

• son3.vue

<template>
  <div class="son3">
    <h3>姓名:{{ name }}</h3>
    <h3>年龄:{{ age }}</h3>
    <button @click="sendMsgToApp">点我把son3中的数据传给app</button>
  </div>
</template>

<script>
export default {
  name: "son3",
  data() {
    return {
        name:"王五",
        age:23
    }
  },
  methods:{
      sendMsgToApp(){
          this.$emit("event2",this.name,this.age);
      }
  }
  
};
</script>

<style>
.son3 {
  background-color: pink;
}
</style>

2.3 上述两种方式对比

这两种形式的区别就是，方式一在模板加载完成后就固定好了，可以触发事件调用方法，而方式二更加灵活，例如在mounted()函数中可以添加定时器，让模板加载完成3s后绑定事件（模板加载完成的3s内点击都无效），如下。

  mounted(){
    setTimeout(()=>{
      this.$refs.son3.$on("event2",this.getNameOfSon3)
    },3000);
  }

3、解绑组件自定义事件

$off解绑事件

this.$off("事件名"); // 解绑一个事件
this.$off(['事件名1','事件名2']); // 解绑多个事件
this.$off(); // 解绑所有事件

总结

（1）组件的自定义事件是一种组件间通信的方式，适用于：子组件传递数据给父组件
（2）使用场景：A是父组件，B是子组件，B想给A传数据，那么就i要在A中给B绑定自定义事件（事件的回调在A中）
（3）绑定自定义事件：
1、第一种方式：在父组件中的组件标签中<Son @eventName="event"/>或者<Son v-on:eventName="event"/>
2、第二种方式：在父组件中：

<Demo ref="demo"/>
....
mounted(){
	this.$refs.demo.$on('eventName',参数)
}

3、如果只想让自定义事件触发一次，可以使用once修饰符，或者$once方法
4、触发自定义事件：this.\$emit('eventName‘，数据)
5、解绑自定义事件：this.$off('eventName')
6、组件上绑定原生DOM事件，例如click时，需要在事件名后面使用native修饰符，否则会将该事件当成自定义事件
7、注意：通过this.$refs.xxx.$on('eventName',回调)绑定事件时，回调用要么配置在methods中，要么用箭头函数，否则this指向会出问题。（直接将普通函数形式配置在methods中和在$on中回调使用箭头函数都是指向vc示例对象，而在$on中使用普通函数形式时，this指向触发事件的对象，可能是别的vc实例）