Vue-事件总线

事件总线

bus

var bus = new Vue();

<div id='box'>
    <input v-model='mytxt'>
    <child></child>
    <childmodel></childmodel>
</div>

let bus = new Vue();
Vue.component("child",{
    template:`<div>child -- <button @click='handelClick'></button></div>`,
    methods:{
        handelClick(){
            bus.$emit('event'，22222);
        }
    }
})
Vue.component("childmodel",{
    template:`<div>child</div>`,
    mounted(){
        bus.$on('event',data=>{
            console.log(data)
        })
    }
})
new Vue({
    el:'#box',
    data:{
        mytxt:''
    }
})

mounted

生命周期中进行监听

• 类型：Function

• 详细：

  实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。 如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内。

  注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

  mounted: function () {
      this.$nextTick(function () {
          // Code that will run only after the
          // entire view has been rendered
      })
  }
  

  该钩子在服务器端渲染期间不被调用。

• 参考：生命周期图示