vue中组件通讯--兄弟组件

步骤：

• 创建一个空Vue实例，也就是一个 bus （ 事件总线 ）
• 一个组件注册事件（ bus.$on(事件名称, () => {}) ）
• 另一个组件触发事件（ bus.$emit(事件名称, 数据) ）

• 注意：一定要是同一个 bus！！！

  <div id="app">
    <jack></jack>
    <rose></rose>
  </div>

  <script src="./vue.js"></script>
  <script>
    // 创建一个bus
    const bus = new Vue()

    Vue.component('jack', {
      template: `
        <div>
          我是jack，我要对 rose 说：
          <button @click="fn">告诉rose：i love u</button>
        </div>
      `,

      methods: {
        fn() {
          // 触发事件
          // 第一个参数表示：事件名称，需要与 注册事件 名称一致
          // 第二个参数表示：要传递的数据
          bus.$emit('love', 'i love u')
        }
      }
    })

    Vue.component('rose', {
      template: `
        <div>
          我是rose，jack 对我说：{{ msg }}
        </div>
      `,

      data() {
        return {
          msg: ''
        }
      },

      created() {
        // 注册事件
        // 第一个参数表示：事件名称
        // 第二个参数表示：事件处理程序
        bus.$on('love', (data) => {
          console.log('rose 接收到 jack 传递过来的数据：', data)

          this.msg = data
        })
      }
    })

    const vm = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>