vue组件通信的补充（非父子）

作者: 蜗牛和曼巴 | 来源:发表于2018-11-07 21:35 被阅读0次

VUE组件（传值，生命周期）
09-生命周期及非父子组件间的通信
vue组件通信的补充（非父子）
生命周期，组件通信、插槽
vue第七节
Vue组件通信方式
Vue相关知识点
vue中的组件通信
vue组件通信，中央事件总线
Vue3组件化（二）：非父子组件的通信、插槽Slot

创建事件总线eventbus, 它是一个空的Vue实例，它可以用来作为非父子组件通信的桥梁

      let evtbus = new Vue()

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <father></father>
    </div>
    <script>
      // 1. 创建事件总线eventbus, 它是一个空的Vue实例，它可以用来作为非父子组件通信的桥梁
      let evtbus = new Vue()

      let son = {
        template: '<div><button @click="tellSister">点击告诉妹妹我女朋友叫{{gfName}}</button></div>',
        data () {
          return {
            gfName: 'rose'
          }
        },
        methods: {
          tellSister() {
            // 2. 利用事件总线，发射一个自定义事件，以及数据
            evtbus.$emit('emitName', this.gfName)
          }
        }
      }
      let daughter = {
        template: '<div>我哥哥告诉我他女朋友叫 {{saoziName}}</div>',
        data() {
          return {
            saoziName: '????'
          }
        },
        // 3. 在daughter组件挂载到页面的时候就一直监听，通过事件总线监听。兄弟什么时候发射事件过来，我什么执行自己的逻辑
        mounted () {
          // 事件总线通过$on方法监听，第一个参数是监听的事件名称，第二个参数是一个回调函数
          evtbus.$on('emitName', (name) => {
            console.log(name);
            this.saoziName = name
          })
        }
      }
      Vue.component('father', { 
        template: `
            <div>
              <son></son>
              <daughter></daughter>
            </div>
        `,
        components: {
          son,
          daughter
        }
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })
    </script>
  </body>
</html>