网页结构

一个网页可以拆分成许多个组件

• 1&2通过父子组件之间直接传值

• 1&3之间无法直接传值（非父子），但是可以间接通过2来传值

• 3&3之间传值无法直接传值（非父子）

总线机制处理非父子组件传值

vue可以使用发布订阅模式处理非父子组件传值（总线机制/Bus/观察者模式）

<div id="root">
    <child content="yu"></child>
    <child content="hao"></child>
</div>

<script>
Vue.prototype.bus = new Vue()

Vue.component('child',{
    //单向数据流，子组件不可以更改父组件的值，通过复制值实现下一步操作
    data: function() {
        return {
            selfContent: this.content
        }
    },
    props: {
        content: String
    },
    template: "<div @click='handleClick'>{{selfContent}}</div>",
    methods: {
        handleClick: function() {
              //this.bus每个实例都先挂载了bus属性，同时bus又是一个实例，它有$emit方法
             //向外出发change事件，同时携带内容this.selfContent
                   this.bus.$emit('change',this.selfContent)
        }
    },
    mounted: function() {
        //this发生了变化
        var this_=this
        this.bus.$on('change', function(msg) {
            this_.selfContent = msg
        })
    }
})

var vm=new Vue({
    el:"#root"
});
</script>

实际应用过程中，是在main.js中Vue.prototype.$bus = new Vue()给$bus赋值vue()实例，实例可以发射与监听事件。

然后非子组件使用方法 this.$bus.$emit('事件名')
父组件监听 this.$bus.$on('事件名',() => {console.log('发出内容')})