Vue组件通讯实践记录

组件通讯

几乎全部的mvvm框架中都要涉及组件通讯的功能（吐槽一下knockout,毕竟是鼻祖就先不说它了）。并且目前的前端形式来看，组件化是一个项目的基础。因此选好一个合适的框架后，随着组件的不断增长，业务的复杂度提高，组件之间的通讯变得尤其重要。

实践方法

因为更换新的框架，咱们的项目由Avalon更新成Vue.可是为了兼容之前的业务代码，不能直接使用vue的标准实践方式，我仍是拿过来后封装了一个vue的class,具体业务里面不影响使用，封装的过程以后写出来再聊吧，下面来总结一下最近用到的通讯实践方法。

1.父组件是经过props传递数据给子组件

vmodel 中包含了两个子组件

<div class="w-base">
    <book-component v-bind:bookdata="book"></book-component>
</div>

<div class="base">
    <node-component v-bind:catalog="catalog" ></node-component>
</div>

复制代码

在上面这段代码中咱们能够看到，定义了两个子组件，而且使用指定v-bind指令传递了数据，子组件会接收到传递的数据。

Vue.component('book-component', {
  template: tpl,//能够传进来子组件的模板文件
  props: ['book'],
  data: function () {
    return { myBook: this.bookdata }
  }
})

复制代码

建议接收到单向的props数据后，定义一个局部变量来初始化使用。

2.父组件与子组件之间通讯的其余方式

vue中给实例提供了三个咱们可用的API$children和$refs以及$parent。

$children：当前实例的直接子组件。须要注意 $children 并不保证顺序，也不是响应式的。

$refs：包含了当前实例全部拥有 ref 注册的子组件的对象.

$parent: 当前实例的父实例。

因此说，若是在通讯方面咱们我组件想要调用子组件，能用的方法只有$refs了，由于$children是一个数组，而且不保证顺序，也没有相关的id去寻找咱们须要的那个特定子组件。可是若是使用$refs去寻找特定子组件，那就必需要给那个子组件注册ref。

父组件的模版

<!-- vm.$refs.child will be the child comp instance -->
<child-component ref="child"></child-comp>
复制代码

父组件

//找到子组件而且调用它的方法
var myChild = this.$refs.child;
myChild.func();
复制代码

子组件

//找到父组件而且调用它的方法
var myParent = this.$parent;
myParent.func();
复制代码

3.平行组件之间的两种通讯方式

a.官方提供的事件bus

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 建立的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})
复制代码

b.经过父组件去找兄弟组件

//找到父组件的$refs对象，而后找到组件的兄弟组件
 var $refs = this.$parent?this.$parent.$refs:{};
 var childComponent =  $refs.child; //child为改组件的ref属性值
复制代码

其实以上两种方法最好的实践方式是封装到项目的基类中，这样不用每次都去定义一个空Vue()实例，而是每一个实例的基类中都有这个事件bus。一样能够封装找到其余兄弟组件的方法，可是该兄弟组件必须注册ref

下面这个方法是我在项目中封装的用于找到父组件，而后再去找到兄弟组件的方法。

//平行组件之间的通讯
getComponentByRef: function(refId) {
    var $refs = this.$parent?this.$parent.$refs:{};
    for (var $id in $refs) {
        if ($id == refId) {
            return $refs[$id];
        }
    }
    return null;
}
复制代码

使用

//在组件中直接使用
this.getComponentByRef("booknode").updateNode(this.node);
复制代码

4.组件间复杂数据通讯Vuex

一说到vuex，不少刚开始接触vue的人会主动避免去使用它，其实它并无想象中的那么复杂。最好的开始是引入vuex后，走一遍给出的小示例。可是若是你的项目并不复杂的话，能够不考虑状态管理，那么何时须要使用状态管理呢？

咱们来看这样一个布局

若是component1中的某个数据变动，那么com2,com3也要跟着更新，此时com3中又细分为了三个小组件。

问题：

1. 多个试图依赖同一个状态
2. 多层嵌套的组件，数据变动和代码维护困难

那这样的状况时，咱们能够考虑使用状态管理。下一篇文章将详细讲解关于vuex的实践和理解。

写在最后的总结

总结方法很简单，网上教程也不少，最重要的是要结合本身的实践去感悟，这样才能有收获，有成长。

Cayley 一个不断努力学习的女程序员