Communicating between Components笔记 | 天一阁

Communicating between Components笔记

Communicating between Components笔记

父组件向子组件发送消息

子组件利用props选项,建立输入参数。这些参数在子组件中使用起来就像data属性是一样的。

props可以是一个字符串数组,每个元素都是一个字符串,这个字符串就是参数的名字

props也可以做类型检查,并指定是否是必选参数,对可选参数还能设置默认值。

父组件在调用组件时,绑定一个参数,名字必须和子组件props定义的一样。

子组件向父组件发送消息

$emit(‘nameOfEvent’, ‘valueOfEvent’)

@nameOfEvent

实际上就是子组件里面,调用vue内置函数,相当于给父组件发送一个事件。父组件只需要v-on:Event,就可以实现当子组件需要传送数据或消息给父组件时,父组件能够处理相关的逻辑。

另挖一种方式,就是父组件的call back方式。由父组件定义一个函数,把函数当做prop传入子组件。子组件在需要的时候,对这个callback函数进行调用。

两个子组件之间通信

子组件之间没有直接的联系,可以通过父组件建立通路实现两个子组件之间的通信。

还可以使用eventBus的方式。这种方式就是建立一个全局的Vue实例,利用vue内置的函数$emit, $on,进行消息通信,和数据传递。

1
2
3
4
5
6
7
export const eventBus = new Vue({
methods: {
addSize(delta){
this.$emit('addSize', delta);
}
}
});