Vue.js--非父子组件通信（中央事件总线、父链、子组件索引）详解

最新推荐文章于 2022-12-03 10:37:36 发布

吴声子夜歌

最新推荐文章于 2022-12-03 10:37:36 发布

阅读量631

点赞数 3

分类专栏： Vue.js 文章标签： Vue.js 非父子组件通信中央事件总线父链子组件索引

本文链接：https://blog.csdn.net/cold___play/article/details/102529802

版权

Vue.js 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

非父子组件通信

在实际业务中，除了父子组件通信外，还有很多非父子组件通信的场景，非父子组件一般有两种：兄弟组件和跨多级组件。

在Vue.js 2.x中，推荐使用一个空的Vue实例作为中央事件总线（bus），也就是一个中介，为了更形象地了解它，可以举一个生活中的例子。

比如我们需要租房子，我们可能会找房产中介来登记需求，然后中介把我们的信息发给满足要求的出租者，出租者再把报价和看房时间告诉中介，由中介再转达给我们，整个过程中，卖家和卖家并没有任何交流，都是通过中间人来传话的。

或者你最近可能要换房了，你会找房产中介登记你的信息，订阅你找房需求相关的资讯，一旦有符合要求的房子出现，中介会通知你，并传达你房子的具体信息。

在这两个例子中，你会出租者担任的就是两个跨级的组件，而房产中介就是这个中央事件总线（bus）。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>非父子组件通信</title>
</head>
<body>
    <div id="app">
        {{message}}
        <component-a></component-a>
    </div>
    <script>
        var bus = new Vue();

        Vue.component('component-a',{
            template: '<button @click="handleEvent">传递事件</button>',
            methods: {
                handleEvent: function () {
                    bus.$emit('on-message','来自组件component-a的内容');
                }
            }
        });

        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            mounted: function () {
                var _this = this;
                //在实例初始化时，监听来自bus实例的事件
                bus.$on('on-message',function (msg) {
                    _this.message = msg;
                });
            }
        });
    </script>
</body>
</html>

首先创建了一个名为bus的空Vue实例，里面没有任何内容；然后全局定义了组件component-a；最后创建Vue实例app，在app初始化时，也就是在声明周期mounted钩子函数里监听了来自bus的事件on-message，而在component-a中，点击按钮会通过bus把事件on-message发出去，此时app就会接收到bus的事件，进而在回调里完成自己的业务逻辑。

这种方法巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级，而且Vue 1.x 和 Vue 2.x都适用。如果深入使用，可以扩展bus实例，给它添加data、methods、computed等选项，这些都是可以共用的，在业务中，尤其是协同开发时非常有用，因为经常需要共享一些通用的信息，比如用户登录的昵称、性别、邮箱等，还有用户的授权token等。只需在初始化时让bus获取一次，任何时间、任何组件就可以从中直接使用了，在单页面富应用（SPA）中会很实用。

除了中央事件总线bus外，还有两种方法可以实现组件通信：父链和子组件索引。

父链

在子组件中，使用this.$parent 可以直接访问该组件的父实例或组件，父组件也可以通过this.$children访问它所有的子组件，而且可以递归向上或向下无限访问，直到根实例或最内层的组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>父链</title>
</head>
<body>
    <div id="app">
        {{message}}
        <component-a></component-a>
    </div>
    <script>
        Vue.component('component-a',{
            template: '<button @click="handleEvent">通过父链直接修改数据</button>',
            methods: {
                handleEvent: function () {
                    //访问到父链后，可以做任何操作，比如直接修改数据
                    this.$parent.message = '来自组件component-a的内容';
                }
            }
        });

        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        });
    </script>
</body>
</html>

尽管Vue允许这样操作，但在业务中，子组件应该尽可能地避免依赖父组件的数据，更不应该去主动修改它的数据，因为这样使得父子组件紧耦合，只看父组件，很难理解父组件的状态，因为它可能被任意组件修改，理想情况下，只有组件自己能修改它的状态。父子组件最好还是通过props和$emit来通信。

子组件索引

当子组件较多时，通过this.$hildren来一一遍历出我们需要的一个组件实例是比较困难的。尤其是组件动态渲染时，它们的序列是不固定的。 Vue提供了子组件索引的方法，用特殊的属性ref来为子组件指定一个索引名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>子组件索引</title>
</head>
<body>
    <div id="app">
        <button @click="handleRef">通过ref获取子组件实例</button>
        <component-a ref="comA"></component-a>
    </div>
    <script>
        Vue.component('component-a',{
            template: '<div>子组件</div>',
            data: function () {
                return {
                    message: '子组件的内容'
                }
            }
        });

        var app = new Vue({
            el: '#app',
            methods: {
                handleRef: function () {
                    //通过$refs来访问指定的实例
                    var msg = this.$refs.comA.message;
                    console.log(msg);
                }
            }
        });
    </script>
</body>
</html>

在父组件模板中，子组件标签上使用ref指定一个名称，并在父组件内荣国this.$refs来访问指定名称的子组件。

注意：$refs只在组件渲染完成后才填充，并且它是非相应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用$refs。

吴声子夜歌

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js--非父子组件通信（中央事件总线、父链、子组件索引）详解

非父子组件通信在实际业务中，除了父子组件通信外，还有很多非父子组件通信的场景，非父子组件一般有两种：兄弟组件和跨多级组件。在Vue.js 2.x中，推荐使用一个空的Vue实例作为中央事件总线（bus），也就是一个中介，为了更形象地了解它，可以举一个生活中的例子。比如我们需要租房子，我们可能会找房产中介来登记需求，然后中介把我们的信息发给满足要求的出租者，出租者再把报价和看房时间告诉中介，由中...
复制链接

扫一扫