中间事件管理器

<body>
   <!-- 
    中间事件管理器，其实就是一个发布订阅者模式。在 vue 中我们可以通过实例化一个空的vue实例对象来操作

    1. const bus = new Vue()

    2. A -> B 先在 B 组件中通过 bus.$on() 来监听一个自定义事件

    3. A -> B 在 A 组件的某个时刻通过 bus.$emit() 来触发自定义事件

   -->

  <div id="app" v-cloak>
    <parent></parent>

    <hr>

    <hello></hello>
    <world></world>
  </div>

  <script src="./js/vue.js"></script>
  <script>
      //创建一个空实例 做中间代理
    const bus = new Vue()

    Vue.component('hello', {
      template: `
        <div>
          <p>hello</p>
          <button @click="fn1">带我，修改world组件的名字为李四丰</button>
        </div>
      `,

      methods: {
        fn1 () {
          // 触发（发布）一个事件
       //bus空实例,$emit触发事件 changName事件名字 , 第二个参数是要传递的数据
       bus.$emit('changName','李四丰')
        }
      }
    })

    Vue.component('world', {
      data () {
        return {
          name: '李四'
        }
      },
      template: `
        <div>
          <p>world</p>
          {{ name }}
        </div>
      `,
      created () {//只有在生命周期函数中才能起一个没有条件的监听
        // 监听（订阅）一个事件
        //假实例下监听changeName事件,拿到新的数据将其赋值
        bus.$on('changeName',(newName) =>{
            this.name = newName
        })
      }
    })

    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      }
    })
  </script>
中间事件管理器

推荐阅读更多精彩内容
