总结: 非父子组件传值的步骤:

1,在全局作用域下创建一个空的vue对象, 作为总线bus
var bus = new Vue();
2, 在接收数据的组件初始化函数中使用bus.$on监听自定义事件
bus.$on(“myevent”, data=>{ this.name = data })
3, 在发送数据的组件中, 使用bus.$emit发射/触发自定义事件,把数据发出去
bus.$emit(“myevent”, e.target.value)
注意: 第二步监听必须在第三步发射之前执行, 否则借不到数据, 如
在created中bus.$emit, 在mounted中bus.$on则肯定接不到数据
在created中bus.$emit, 在created中bus.$on则不一定接到数据

  1. <body>
  2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
  3.     <div id='myApp'>
  4.         组件1: <my-com1></my-com1>  <hr>
  5.         组件2: <my-com2></my-com2>
  6.     </div>
  7.     <script>
  8.         // 1,在全局作用域下创建一个空的vue对象, 作为总线bus, 相当于一个桥梁连接两个不同的组件, bus在任意组件中都可以调用
  9.         var bus = new Vue();
  10.         Vue.component('myCom1', {
  11.             template: '<div><input @input="send"></div>',
  12.             methods:{
  13.                 send(e){
  14.                     // 3,在发送数据的组件中, 使用bus.$emit发射/触发自定义事件,把数据发出去
  15.                     bus.$emit("myevent", e.target.value)
  16.                 }
  17.             }
  18.         })
  19.         Vue.component('myCom2', {
  20.             template: '<div><h1>{{name}}</h1></div>',
  21.             data(){ return {name: ""} }, 
  22.             created() {
  23.                 // 2, 在接收数据的组件初始化函数中使用bus.$on监听自定义事件, 在事件函数中接收数据
  24.                 bus.$on("myevent", data=>{
  25.                     // 注意用箭头函数,否则this指向bus
  26.                     this.name = data
  27.                 })
  28.             },
  29.         })
  30.         new Vue({
  31.             el: '#myApp'
  32.         })
  33.     </script>
  34. </body>