Vue 非父子组件间传值 - 木子才的博客

Vue 项目由多个组件组成，如何解决复杂的多层间传值？

Vuex

Bus/总线/发布订阅模式/观察者模式

兄弟组件间的值传递。

两个组件通过一个总线连接起来。

点击组件’Muzico‘将组件’Yococo‘的内容也变成’Muzico‘，而当点击组件’Yococo‘将组件’Muzico‘的内容也变成’Yococo‘。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <child content="Muzico"></child>
            <child content="Yococo"></child>
        </div>
        
        <script>
            Vue.prototype.bus = new Vue()
            
            Vue.component('child', {
                props: {
                    content: String,
                },
                data: function() {
                    return {
                        selfContent: this.content,
                    }
                },
                template: '<div @click="handleClick">{{selfContent}}</div>',
                methods: {
                    handleClick: function() {
                        this.bus.$emit('change', this.content)
                    },
                },
                mounted: function() {
                    var that = this
                    this.bus.$on('change', function(msg) {
                        that.selfContent = msg
                    })
                },
            })
            
            var vm = new Vue({
                el: '#app',
            })
        </script>
    </body>
</html>