前端Vue2-Day55

组件自定义事件：组件间通信方式（适用于子组件传值给父组件）

使用场景：A为父组件，B为子组件。若B想给A传值，则需在A中给B绑定事件。事件的回调要在父组件A中！

绑定：均在父组件中进行绑定，methods进行定义方法

① v-on/@xxx：直接进行绑定，名称为methods中方法名

<Demo v-on:test="test" />
// 简写形式
<Demo @test="test" />

 

② ref+$on：$on("事件名"，事件) ：对组件进行ref命名，使用生命周期钩子mounted内this.$refs.命名.$on进行绑定

<template>
    <Demo ref="demo"/>
</template>

<script>
export default {
    mounted() {
　　　　　// test 方法在 methods 中已定义
        this.$refs.demo.$on("test", this.test)
  },
};
</script>

若想只让自定义事件执行一次则使用$once或绑定时使用事件修饰符.once

 

触发：$emit("父组件绑定的事件名"，数据)

解绑：$off

① 解绑单一事件：$off("事件名")

② 解绑多个事件：$off(["事件名"，"事件名"，.....])

③ 解绑所有事件：$off()

事件修饰符.native：用于声明给组件绑定的是原生DOM事件。

 <Demo ref="demo" @click.native="show" />

注意：使用$on进行事件绑定时：this.$refs.demo.$on("test"，回调)，回调函数的定义要么在methods中定义在此调用，要么使用箭头函数直接定义，否则this指向会有问题。

 

全局事件总线：实现任意组件间通信

原理：利用一个公共区域，进行所有组件的事件管理。运行所有组件访问且拥有自定义事件的$on、$off、$emit方法。

利用Vue.prototype = VueComponent.prototype.__proto__的特性，将全局事件总线$bus绑定至vm身上，后续所有组件均可通过原型链访问到公共事件。这里绑定在vm身上要在beforeCreate中进行，这是因为此时模板尚未解析，若在此之后定义，即组件解析完毕再进行绑定会导致子组件调用产生未定义事件总线的错误。

安装全局事件总线：

new Vue({
  render: h => h(App),
  // 妙处
  beforeCreate() {
    Vue.prototype.$bus = this // 安装全局事件总线
  },
}).$mount('#app')

 

使用事件总线：

① 使用数据：若A组件想接收数据，则在A中给$bus绑定方法，事件的回调将留在A组件自身。

methods: {
  demo(data) {
    .....
  }
},
mounted() {
  this.$bus.$on('事件名', this.demo)
},

② 提供数据：调用this.$bus.emit('事件名'，数据)

methods: {
  demo() {
    this.$bus.$emit('事件名', 数据)
  }
},

注意：最好在beforeDestroy生命周期钩子中$off解绑事件。