4-5#去哪儿网app#兄弟组件间的传值(难点)-CSDN博客

本文链接：https://blog.csdn.net/xinkuIe/article/details/109519818

以这张图为例，对于上下相邻的两层即父子层，之前学过通过props和$emit可以实现传值。

但对于第一层和第三层或第三层之间的传值，怎么办呢？提供两种方法。

法一：vue x 。法二：总线机制（Bus/总线/发布订阅模式/观察者模式）

本文主要讲总线机制。vuex在后面项目介绍。代码：

<div id="root">
    <!-- 下面两个child是兄弟组件的关系 -->
    <child content="Dell"></child>
    <child content="Lee"></child>
</div>

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

    Vue.component('child', {
        data: function() {
            return {
                selfContent: this.content
            }
        },
        // 写data的原因是 单向流机制，不要对传来的数据直接修改
        props: {
            content: String
        },
        template: '<div @click="handleClick">{{selfContent}}</div>',
        methods: {
            handleClick: function() {
                this.bus.$emit('change', this.selfContent);
                // 向外触发事件
            }
        },
        // 生命周期钩子
        mounted: function() {
            var that = this;
            // 事件监听↓
            this.bus.$on('change', function(msg) {
                that.selfContent = msg;
            })
        }
    })
    var vm = new Vue({
        el: '#root'
    })
</script>