非父子组件的传组问题

一个页面可以细化拆分成不同的组件

父子组件间可以用属性和事件通信，如果是跨层传递，能借助中间层进行通信，但这种方式太麻烦；而且如果是同级或者没有层级关系，要怎么传值？

有两种方案：

• vuex
• 发布订阅 也称总线

本文以发布订阅为例：

在 Vue 的实例挂载一个 bus 属性，这样在每一次 vue 实例都有这个属性

<div id="app">
    <div class="container mt-5">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>
</div>
<script>
    // 在 Vue 的实例挂载一个 bus 属性，这样在每一次 vue 实例都有这个属性
    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.$emit('change', this.selfContent)
            }
        },
        mounted: function() {
            // 回调函数的 this 会被改变，提前承接此变量
            var this_ = this
            this.bus.$on('change', function (msg) {
                console.log(msg)
                this_.selfContent = msg
            })
        }
    })

    var app = new Vue({
        el: '#app',
        methods: {
            handleClick: function() {
                // 会触发
                console.log('自定义事件触发的点击')
            }
        }
    })
</script>

总线为不同层级的组件提供了传递数据的通道