Vue组件之间通讯的三种方式

时间 2019-12-08

标签 vue 组件之间通讯三种方式繁體版

原文原文链接

最近在看梁颠编著的《Vue.js实战》一书，感受很有收获，特此记录一些比价实用的技巧。前端

组件是MVVM框架的核心设计思想，将各功能点组件化更利于咱们在项目中复用，这相似于咱们服务端面向对象三大特性之一的封装，将复杂的会被屡次调用的代码封装成组件,在须要调用的地方注册使用便可。这样设计的前端代码方便移植，能够跨项目复用。vue

组件之间的关系分为父子组件兄弟组件和跨多级组件等等，在组件之间交互数据，进行通讯主要经过三种方式来进行：app

中央事件总线（非父子组件通讯）
父链
子组件索引

下面让咱们来好好说道说道这三种通讯方式：框架

一.中央事件总线组件化

这个东西名字叫的很唬人，但实际倒是很好理解的一种通讯方式，话很少说，咱们来上代码。this

<body>
    <div id="app">
        {{message}}
        <tempcomponent-a></tempcomponent-a>
    </div>
    <script>
        var middleware = new Vue();

        Vue.component('tempcomponent-a', {
            template: '<button @click="handleEvent">传递事件</button>',
            methods: {
                handleEvent: function () {
                    middleware.$emit('on-message', '来自组件tempcomponent-a的内容');
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            mounted: function () {
                var _this = this;
                middleware.$on('on-message', function (msg) {
                    _this.message = msg;
                })
            },
        });
    </script>
</body>

在上面的代码中，空的Vue实例"middleware"就是咱们的所谓的中央事件总线，咱们能够看到，它负责在自组件"tempcomponent-a"中发出事件，在咱们的主体Vue实例app中,经过监听"middleware"来获取子组件发出的内容。个人理解是中央事件总线就相似咱们作交换数据的时候的临时变量同样，它在中间负责处理结果，而后返回消息给请求者,它的职责就是中介。这个空的vue实例也能够加入data，methods等选项，这些都是能够做为公用的。spa

二.父链$parent设计

父链这个词就很好理解啦，顾名思义便是组件的父对象，在组件内部能够直接经过$parent对父对象进行操做code

<body>
    <div id="app">
        {{message}}
        <tempcomponent-a></tempcomponent-a>
    </div>
    <script>
        Vue.component('tempcomponent-a', {
            template: '<button @click="handleEvent">经过父链直接修改数据</button>',
            methods: {
                handleEvent: function () {
                    this.$parent.message = '来自组件tempcomponent-a的消息';
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        })
    </script>
</body>

经过上面的代码，咱们能够看到在自组件内，使用父链$parent直接对父对象对属性操做是很是简单的。component

三.子组件索引ref&$refs

子组件这个也很好理解，是在父对象上对所拥有对子组件进行操做，通常来讲父容器内对子组件会有多个，因此每一个组件须要设置特殊属性ref来为自身指定一个惟一名称。

<body>
    <div id="app">
        <button @click="handleRef">经过ref获取子组件实例</button>
        <tempcomponent-a ref="comA"></tempcomponent-a>
    </div>
    <script>
        Vue.component('tempcomponent-a', {
            template: '<div>子组件</div>',
            data: function () {
                return {
                    message: '子组件内容'
                }
            }
        });
        var app = new Vue({
            el: '#app',
            methods: {
                handleRef: function () {
                    var msg = this.$refs.comA.message;
                    console.log(msg);
                }
            }
        })
    </script>
</body>

从代码能够看出，当咱们直接在组件上建立ref属性，在父对象中想对子组件进行操做，直接经过$refs.加上该组件惟一对ref属性便可访问。注意$refs是子组件渲染完成以后才填充对，并且不是响应式，应避免在计算属性和模版中使用$refs