前言: 之前写过一篇文章《在不同场景下Vue组件间的数据交流》,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向绑定的的用法, 于是决定写一篇文章, 再次总结下“Vue中的父子组件通信”。
前面提示:本文文字略少,代码略多 父子组件通讯,可分为两种情况: 1. 父组件向子组件中传递数据2. 子组件向父组件中传递数据一般情况下, 1中情况可通过props解决数据传递的问题, 这里就不多赘述了。
子组件向父组件中传递数据
主要谈谈2中情景的实现,有三种方式:
一. 通过props,父组件向子组件中传递数据和改变数据的函数,通过在子组件中调用父组件传过来的函数,达到更新父组件数据(向父组件传递数据)的作用(子组件中需要有相应的响应事件)二. 通过在子组件中触发一个 自定义事件(vm.$emit),将数据作为vm.$emit方法的参数,回传给父组件用v-on:[自定义事件]监听的函数三.通过ref对子组件做标记,父组件可以通过vm.$refs.[子组件的ref].[子组件的属性/方法]这种方式直接取得子组件的数据
下面我将一 一展示
一. 通过props从父向子组件传递函数,调用函数改变父组件数据
这里就不做代码展示了
一来是因为相对比较简单二来是因为这种方式显然不是Vue中的最佳实践(在react中倒比较常见) 想要看代码的话可以看这里:《【Vue】浅谈Vue不同场景下组件间的数据交流》 (在兄弟组件的数据交流那一节)
二. 通过自定义事件从子组件向父组件中传递数据
我们可以在子组件中通过$emit(event, [...参数])触发一个自定义的事件,这样,父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件, 并且可以在监听函数中依次取得所有从子组件传来的参数例如:在子组件中某个部分写入:this.emit('eventYouDefined', arg);
我是父组件,我接受到了: { { text || '暂无数据' }}
子组件:
我是子组件,我所拥有的数据: {
{ text }}
在点击子组件中的“发送数据”按钮前, 父组件还没有接受到数据(text为空字符串), 则通过 { { text || '暂无数据' }}将显示默认文本:‘暂无数据’ 点击“发送数据”按钮后:
因为sendData自定义事件被触发,通过
this.$emit('sendData', this.text) //此处的this指向子组件实例)
子组件的text数据被父组件中:
中的getSonText函数作为参数接传参受到, 从而完成了从子组件向父组件中的传参过程
三. 通过ref属性在父组件中直接取得子组件的数据(data)
对于我们上面讲的一和二的处理情景来说,有个局限性就是它们都需要以事件机制为基础(无论是像click那样的原生事件还是自定义事件),而在事件发生的时候才能调用函数将数据传递过来但如果子组件里没有类似“按钮”的东西,因而无法制造原生事件,同时也没办法找到一个触发自定义事件的时机的时候,怎么从子组件向父组件传递数据呢??这个时候, 我们就只能从父组件中“直接取”子组件的数据了,借助ref属性ref是我们经常用到的Vue属性,利用它可以简单方便地从本组件的template中取得DOM实例,而实际上,如果你在父组件中为子组件设置ref的话, 就可以直接通过vm.$refs.[子组件的ref].[子组件的属性]去拿到数据啦,例如:父组件:我是父组件,我接受到了: { { text || '暂无数据' }}
子组件:
我是子组件,我所拥有的数据: {
{ text }}
demo:尚未点击“接受数据”按钮前:
点击接受数据按钮后:
通过sync实现数据双向绑定, 从而同步父子组件数据
通过以上三种方式, 我想你应该能解决绝大多数父子组件通信的场景了,但让我们再仔细考虑一下上面的通信场景,就会发现它们还可能存在的问题:从子组件向父组件传递数据时,父子组件中的数据仍不是每时每刻都同步的
但在某些特殊的需求场景下,我们可能会希望父子组件中的数据时刻保持同步, 这时候你可能会像下面这样做:
这是父组件中的template:props: { foo: [type]}
同时每当子组件中数据改变的时候,通过
this.$emit('update', newValue)
把参数newValue传递给父组件template中监听函数中的"val"。然后通过
val => bar = val
这个表达式就实现了bar = newValue. 这个时候,我们发现父组件中的关键数据bar被子组件改变(相等)了!
通过数据的双向绑定, 父(组件)可以修改子的数据, 子也可以修改父的数据Vue提供了sync修饰符简化上面的代码,例如:bar = val">
this.$emit("update:foo", newValue)
我是父组件智力: {
{ wisdom }}膜法: {
{ magic }}攻击: {
{ attack }}防御: {
{ defense }}
子组件:
我是子组件
智力: {
{ wisdom }}膜法: {
{ magic }}攻击: {
{ attack }}防御: {
{ defense }}
点击前:
点击增加子组件中“增加智力”按钮的时候, 父组件和子组件中的智力参数同时从90变为91 点击增加子组件中“增加膜法”按钮的时候, 父组件和子组件中的智力参数同时从160变为161
数据双向绑定是把双刃剑
从好处上看:
1.它实现了父子组件数据的“实时”同步, 在某些数据场景下可能会使用到这一点2.sync提供的语法糖使得双向绑定的代码变得很简单 从坏处上看:它破环了单向数据流的简洁性, 这增加了分析数据时的难度
当sync修饰的prop是个对象
我们对上面的例子修改一下, 把数据包裹在一个对象中传递下来:父组件我是父组件智力: {
{ analysisData.wisdom }}膜法: {
{ analysisData.magic }}攻击: {
{ analysisData.attack }}防御: {
{ analysisData.defense }}
子组件:
我是子组件
智力: {
{ analysisData.wisdom }}膜法: {
{ analysisData.magic }}攻击: {
{ analysisData.attack }}防御: {
{ analysisData.defense }}
demo同上
不要通过在子组件中修改引用类型props达到“父子组件数据同步”的需求!
父组件的数据传递给子组件, 一般通过props实现, 而在实现“父子组件数据同步”这一需求的时候, 小伙伴们可能会发现一点: 在子组件中修改引用类型的props(如数组和对象)是可行的1.不仅可以达到同时修改父组件中的数据(因为本来引用的就是同一个数据)2.而且还不会被Vue的检测机制发现!(不会报错)但千万不要这样做, 这样会让数据流变得更加难以分析,如果你尝试这样做, 上面的做法可能会更好一些不要这样做,糟糕的做法:父组件:我是父组件智力: {
{ analysisData.wisdom }}膜法: {
{ analysisData.magic }}攻击: {
{ analysisData.attack }}防御: {
{ analysisData.defense }}
子组件:
我是子组件
智力: {
{ analysisData.wisdom }}膜法: {
{ analysisData.magic }}攻击: {
{ analysisData.attack }}防御: {
{ analysisData.defense }}
demo同上, 但这并不是值得推荐的做法
【完】