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>
上一篇:MySQL语句练习


下一篇:实验三 面向对象分析与设计