vue 非父子组件传值 事件总线 $on $emit 新手踩过的坑及解决方法

vue 非父子组件传值 事件总线 $on $emit 新手踩过的坑及解决方法

vue 非父子组件传值 事件总线 $on $emit 新手踩过的坑及解决方法

基本语句

Vue.prototype.bus = new Vue()// 在 Vue 的prototype挂载了一个bus属性

//触发事件 传值
this.bus.$emit('change', this.name)// 通过$emit向外层触发事件并传递参数；第一个参数是事件名字随便起但需跟$on中的事件名字一样

// 监听事件 接收值
 this.bus.$on('change', (data) => {
      this.name = data
      console.log('$on传的值', this.name)
    })

写在哪里？

Vue.prototype.bus = new Vue()// 在 Vue 的prototype挂载了一个bus属性

写在main.js入口文件中 作为全局的vue能够被所有组件引用
$emit 写在传送值的组件A中
$on 写在接受值的组件B中

踩过的坑

1、$on接收不到值

注意vue组件的生命周期
通过查询资料得知原来 vue路由切换时，会先加载新的组件，等新的组件渲染好但是还没有挂载前，销毁旧的组件，之后挂载新组件，如下图所示：

新组件beforeCreate
        ↓
新组件created
        ↓
新组件beforeMount
        ↓
旧组件beforeDestroy
        ↓
旧组件destroyed
        ↓
新组件mounted

所以监听不到的原因可能是$emit触发时$ on还未监听
从而应该

// A组件
 beforeDestroy () {
  this.bus.$emit('change', this.name)
  }
  // B 组件
  created(){
   this.bus.$on('change', (data) => {
      this.name = data
      console.log('$on传的值', this.name)
    })
  }

2、$ on收到值了，但数据不更新

将function(data) 改成 （data）=>
因为this 的指向不对

 this.bus.$on('change', function(data) {
      this.name = data
      console.log('$on传的值', this.name)

 this.bus.$on('change', (data) => {
      this.name = data
      console.log('$on传的值', this.name)