上文我们提到父组件向子组件的值传递和事件触发。本文我们谈谈子组件向父组件的值传递和事件触发。

图片

如图片所示,在 Vue.js 中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。由于 Vue.js 单向数据流的设计理念,我们拒绝通过子组件直接修改父组件的值,因此,子组件向父组件的传值是需要伴随着触发事件一起发生的,而值作为事件的载荷,被传递给父组件。

1. 简单的事件触发

首先,我们从最基础的事件触发开始做起。

请看实例

1
<child @update='add'></child>

父组件通过在子组件上 @update='add' 将父组件的 add 放到绑定/注册到 update 事件上。

1
2
3
4
5
methods: {
cadd(){
this.$emit('update')
}
}

子组件通过 this.$emit('update') 触发父组件绑定在 update 上的 add

2. 父组件传参的事件触发

在父组件事件触发(调用)的同时,我们可以给父组件的方法传入父组件的参数。

请看实例

相对于 1,这里的变化主要是

1
<child @update='add(step)'></child>

父组件的 step 作为参数传入到 add 方法中。

3. 子组件传参的事件触发

子组件触发父组件事件的同时,很多情况下是有传参需要的,这也是比较常用的子组件向父组件传值方式。

请看实例

相对于 1,这里的主要变化是

1
2
3
4
5
methods: {
cadd(){
this.$emit('update', this.step)
}
}

要传递的值(载荷)作为 $emit 的第二个参数传入到父组件当中,父组件可以直接在 methods 里通过参数获取。

4. 子组件和父组件都需要传参的事件触发

综合 2 和 3,我们可以发现,父组件的 add 方法传参已经被各自的方式占用

1
2
3
4
5
methods: {
add(num){ // 二者的 num 都有各自的用处
this.value+= +num
}
}

那么,如果我们父子组件都有传参进入,我们如何解决呢?

请看实例

本例中,主要的逻辑在子组件上的 update 事件上这段里

1
<child @update='function(cnum){ add(fstep, cnum) }'></child>

通过这种方式,保存父组件的 fstep,接收子组件的 cnum,再一起传入 add 函数中,实现了区分父子组件各自传值的区分。

5. 总结

针对简单的传值问题,1 和 3 已经可以满足需求。

2 中也可以采取在 add 函数中直接调用 this.step 的方式获取父组件的值。相似的,4 中也可以直接在 add 函数中调用 this.fstep获取值。

不过,2 和 4 这种模式,可以应对子组件在 v-for 循环的情况,来保存 v-for 中不同的父组件的值。

更多

正如上一篇中最后所提到的,对于稍微复杂的项目,Vuex 可能才是最好的选择方案。
介于 Vuex 文档十分详细明了,在此就不画蛇添足了,以免弄巧成拙,误导了大家。


本文采用 CC BY-NC-SA 3.0 CN 许可协议,转载请注明出处。
本文地址: http://blog.ralfz.com/2017/04/19/vue-parent-child-communication-2/