Vue组件通信实践记录(推荐)

2020-06-13 10:43:26易采站长站整理

组件通信

几乎所有的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;
mymyChild.func();

子组件


//找到父组件并且调用它的方法