个人设置（一）-VUE基础-组件传值(非父子) —eventbus-只提供vue实例 & 谁需要数据 谁用eventBus绑定事件 & 谁传递数据 谁用eventBus触发事件

01-VUE基础-组件传值(非父子) 理论分析——>代码实现

• 父传子
• 子传父
• 非父子
  • 在A组件内绑定一个事件（C.$on(‘事件名称’，函数（参数）｛｝)），当事件被触发，接收传参。
  • 在B组件内触发这个事件（C.$emit(‘事件名称’，‘数据’)），触发这个事件，传参即可。
  • 这个事件，由C绑定，由C触发。（术语：事件总线eventBus-控制了组件传值需要使用的所有事件绑定和触发）

对应的实现：

数据由B组件——>A组件

src/components/eventBus.js eventbus-只提供vue实例即可 第一步：有实例 -创建实例，作为模块

// 提供C  事件总线 eventBus（负责任何组件之间的传值需要的  事件绑定和事件触发）
import Vue from 'vue'
export default new Vue()

src/components/com-a.vue 谁需要数据 谁用eventBus绑定事件 第二步：绑事件

//第一步：导eventBus包
import eventBus from './eventBus'
//第二步：配置项中绑定事件，别人触发
export default {
  data(){
      return{
          msg:'组件内部数据COM-A'
      }
  }
  created () {
    eventBus.$on('b2a', (data) => {
      // 得到了数据 data ,给msg赋值
        this.msg = data
    })
  }
}

src/components/com-b.vue 谁传递数据 谁用eventBus触发事件 第三步：触发事件

//第一步：导eventBus包
import eventBus from './eventBus'
//第二步：配置项中绑定事件，触发点击事件
export default {
    data(){
        return{
            msg:'COM-B的数据'
        }
    }
  methods: {
 //   fn1(){
 //       //提交数据给父组件
 //       this.$emit('abc',this.msg)
 //   },
    fn2 () {
      // 传递数据给A组件
     // eventBus.$emit('b2a', '数据')
         eventBus.$emit('b2a', this.msg)
    }
  }
}

传值方式