Vue - 组件的自定义事件

组件的自定义事件#

1.一种组件间的通信方式，适用于：子组件 ===> 父组件。
2.使用场景：A是父组件，B是子组件，B想要给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）
3.组件上也可以绑定原生的DOM事件，需要使用native修饰符。
4.注意：通过this.$refs.xxx.$on('事件名',回调)绑定自定义事件时，回调要么在methods中，要么用箭头函数，否则this指向会出现问题。

绑定自定义事件#

方法一#

在父组件中使用<User v-on:hzc="getUser"></User>如果想让自定义事件只能触发一次，可以使用once修饰符或$once方法。
子组件User.vue

<template>
  <div>
    <button @click="getUserInfo">获取学生信息</button>
  </div>
</template>

<script>
export default {
  name: "User",
  data(){
    return{
      info:"这是一个学生信息"
    }
  },
  methods:{
    getUserInfo(){
      this.$emit('hzc',this.info); //触发User组件上的hzc事件
    }
  }

}
</script>

父组件App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <User v-on:hzc="getUser"></User> //自定义事件hzc
  </div>
</template>

<script>
import User from "@/components/User";
export default {
  name: 'App',
  components: {
    User
  },
  methods:{
    getUser(info){
      console.log("getUser被调用...")
      console.log(info)
    }
  }
}
</script>

方式二#

子组件代码与上述相同，在父组件中使用ref属性和mounted()方法实现。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <User ref="user"></User>
  </div>
</template>

<script>
import User from "@/components/User";
export default {
  name: 'App',
  components: {
    User
  },
  methods:{
    getUser(info){
      console.log("getUser被调用...")
      console.log(info)
    }
  },
  mounted() {
    this.$refs.user.$on('hzc',this.getUser)
  }
}
</script>

解绑自定义事件#

方法一：
  this.$off('自定义组件名')   //解绑一个自定义事件
  this.$off(['name1','name2'])  //解绑多个自定义事件
  this.$off()  //解绑所有的自定义事件
方法二：
  this.destroy() //销毁当前组件的实例，销毁后的所有组件实例的自定义事件全都不奏效。