vue子父组件通信几种方法,vue.js父子组件间通信
本文主要介绍Vue中父子组件之间的通信，以及使用sync实现父子组件数据的同步。对vue感兴趣的同学可以参考一下。
目录
前言：子组件将数据传输到父组件。1.props将函数从父组件转移到子组件，并调用函数来更改父组件数据。2.通过用户定义的事件将数据从子组件传输到父组件。3.子组件的数据通过ref属性直接从父组件获取。通过sync实现数据双向绑定，从而同步父子组件数据。数据双向绑定是一把双刃剑。同步修改的属性是一个对象。不要修改子组件中的引用类型属性。
前言
亲子沟通可以分为两种情况：
1.父组件将数据传输到子组件。
2.子组件将数据传输到父组件。
一般在1的情况下可以用道具解决数据传输的问题，这里就不赘述了。
子组件向父组件中传递数据
主要谈谈场景2的实现，有三种方式：
1.通过props，父组件向子组件传输数据和更改数据功能。通过调用子组件中父组件传递的函数，实现更新父组件数据(向父组件传递数据)的功能(子组件中需要相应的响应事件)。
2.通过触发自定义事件(vm。$emit)在子组件中，数据被用作vm的参数。$emit方法，并将其发送回父组件使用v-on监听的函数：[自定义事件]
3.子组件用ref标记，父组件可以通过vm直接获取子组件的数据。$参考文献。[引用子组件]。[子组件的属性/方法]
下面我一个一个给你看。
一. 通过props从父向子组件传递函数，调用函数改变父组件数据
这里就不展示代码了。
第一，因为比较简单。
第二，是因为这种方法在Vue中显然不是最佳做法(在react中相当常见)。
想看代码可以看这里：《【Vue】浅谈Vue不同场景下组件间的数据交流》 http://www.cnblogs.com/penghuwan/p/7286912.html(在兄弟组件的数据交换部分)
二. 通过自定义事件从子组件向父组件中传递数据
我们可以通过$emit(event，[.parameter])，这样父组件就可以直接使用v-on来监听使用子组件的地方的子组件触发的事件，并且可以在监听函数中依次从子组件中获取所有参数。
例如：
写入子组件的一部分：
this.emit(eventYouDefined ，arg)；
然后，您可以在父组件的子组件模板中监听：
//下面是父组件的模板：
son v-on:eventYouDefined= function yours /
下面是一个例子。
父组件
模板
div id=父亲
差异
这是我的父组件，我收到了：
{{ text 尚无数据 }}
son v-on:send data= getson text /son
/div
/div
/模板
脚本
从导入儿子。/son.vue
导出默认值{
数据：函数(){
返回{
文本：“”
}
},
组件：{
儿子：儿子
},
方法：{
getSonText (text) {
this.text=text
}
}
}
/脚本
样式范围
#父亲部门{
填充：10px
边距：10px
边框：1px纯灰；
溢出：隐藏；
}
/风格
子组件：
模板
差异
p我是子组件，我拥有的数据：{{ text }}/p
按钮@click=发送数据
数据发送
/按钮
/div
/模板
脚本
导出默认值{
data () {
返回{
文本：“来自子组件的数据”
}
},
方法：{
sendData () {
这个。$emit(sendData ，this.text)
}
}
}
/脚本
！-添加“scoped”属性以将CSS仅限制到此组件-
样式范围
按钮{ float: left }
/风格
如果父组件在单击子组件中的“发送数据”按钮之前没有收到数据(文本为空字符串)，则默认文本将显示为{{ text 尚无数据 }}:尚无数据。
点击“发送数据”按钮后：
因为sendData自定义事件被触发，所以
这个。$ emit (senddata ，this.text)//This在这里指向子组件实例)
子组件的文本数据在父组件中：
son v-on:send data= getson text /son
中的GetSonText函数作为参数传递，从而完成了从子组件向父组件传递参数的过程。
三. 通过ref属性在父组件中直接取得子组件的数据（data）
对于上面提到的处理场景I和II，一个限制是它们都需要基于事件机制(不管是click这样的原生事件还是自定义事件)，事件发生时可以调用函数传递数据。
但是，如果子组件中没有类似“按钮”的东西，因此无法创建本机事件，也没有办法找到触发自定义事件的时间，那么如何将数据从子组件传输到父组件呢？
此时，我们只能借助ref属性从父组件“直接获取”子组件的数据。
Ref是我们经常使用的Vue属性。使用它，我们可以简单方便地从这个组件的模板中获取DOM实例。事实上，如果在父组件中为子组件设置ref，就可以直接通过vm获取数据。$参考文献。[子组件的参考]。[子组件的属性]，例如：
父组件：
模板
div id=父亲
差异
这是我的父组件，我收到了：
{{ text 尚无数据 }}
Button @click=getSonText()接受数据/按钮
儿子，儿子
/div
/div
/模板
脚本
从导入儿子。/son.vue
导出默认值{
数据：函数(){
返回{
文本：“”
}
},
组件：{
儿子：儿子
},
方法：{
getSonText () {
this.text=this。$refs.son.text
}
}
}
/脚本
样式范围
#父亲部门{
填充：10px
边距：10px
边框：1px纯灰；
溢出：隐藏；
}
/风格
子组件：
模板
差异
p我是子组件，我拥有的数据：{{ text }}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
文本：“来自子组件的数据”
}
}
}
/脚本
！-添加“scoped”属性以将CSS仅限制到此组件-
样式范围
按钮{ float: left }
/风格
演示：
在点击“接受数据”按钮之前：
单击接受数据按钮后：
通过sync实现数据双向绑定， 从而同步父子组件数据
通过以上三种方式，我想你应该可以解决绝大多数父子组件之间的通信场景，但是让我们再仔细考虑一下以上的通信场景，我们会发现其中可能存在的问题：
当数据从子组件传输到父组件时，父组件和子组件中的数据仍然不是一直同步的。
但是在一些特殊的需求场景中，我们可能希望父子组件中的数据一直保持同步。这时，你可以做如下的事情：
这是父组件中的模板：
son:foo= bar v-on:update= val=bar=val /son
在子组件中，我们通过props声明和使用来接收foo
道具：{
foo:[类型]
}
同时，每当子组件中的数据发生变化时，通过
这个。$emit(update ，newValue)
将参数newValue传递给父组件模板中侦听器函数的“val”。那就通过
瓦尔=酒吧=瓦尔
这个表达式实现了bar=newValue。这时我们发现父组件中的关键数据栏被子组件改变(等于)！
通过数据的双向绑定，父(组件)可以修改子的数据，子也可以修改父的数据。
Vue提供了sync修饰符来简化上面的代码，例如：
comp :foo.sync=bar/comp
将扩展到：
comp:foo= bar @ update:foo= val=bar=val /comp
然后，当您需要在子组件中更改父组件的数据时，您需要触发以下自定义事件：
这个。$emit(update:foo ，newValue)
[注意]你可能认为这似乎与我上面提到的第二个“通过自定义事件(emit)将数据从子组件传递到父组件”一节的内容重叠。
然而，事实并非如此。父组件和子组件之间的关系有所不同。在这里，我将通过一行关键代码来证明两者的区别。
1.在我们解释同步的这一节中，当自定义事件发生时运行的响应表达式是：
son:foo= bar v-on: val=bar=val in update= val=bar=val /son
2.在第2部分的“通过自定义事件将数据从子组件传递到父组件”中，自定义事件发生时运行的响应表达式是：
son v-on:eventYouDefined= arg=function yours(arg)/中的arg=functionYours(arg)
对前者，表达式瓦尔=酒吧=瓦尔意味着强制让父组件的数据等于子组件传递过来的数据，这个时候，我们发现父子组件的地位是平等的。父可以改变子（数据), 子也可以改变父（数据)
对后者，你的你的功能是在父组件中定义的，在这个函数里，你可以对从子组件接受来的银数据做任意的操作或处理，决定权完全落在父组件中，也就是：父可以改变子（数据), 但子不能直接改变父（数据)!父中数据的变动只能由它自己决定
下面是一个展示演示：
父组件：
模板
div id=父亲
差异
我是父组件
儿子
:wisdom.sync=wisdom
:magic.sync=magic
:attack.sync=attack
:defense.sync= defense
/儿子
p智力：{{ wisdom }}/p
p膜法：{{ magic }}/p
p攻击：{{ attack }}/p
p防御：{{ defense }}/p
/div
/div
/模板
脚本
从导入儿子/son.vue
导出默认值{
数据：函数(){
返回{
智慧：90,
魔术：160,
攻击：100,
防守：80
}
},
组件：{
儿子：儿子
}
}
/脚本
样式范围
#父亲部门{
填充：10px
边距：10px
边框：1px纯灰；
溢出：隐藏；
}
/风格
子组件：
模板
差异
p我是子组件/p
p智力：{{ wisdom }}/p
p膜法：{{ magic }}/p
p攻击：{{ attack }}/p
p防御：{{ defense }}/p
按钮@click=增量(智慧)增加智力/按钮
button @click=increment(magic )增加膜法/按钮
button @ click= increment( attack )增加攻击/按钮
button @ click= increment( defense )增加防御/按钮
/div
/模板
脚本
导出默认值{
道具：{
智慧：数字，
魔术：数字，
攻击：数量，
防守：人数
},
方法：{
增量（数据名){
设newValue=this[dataName] 1
这个emit(`update:${dataName} `，newValue)
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
按钮{ float: left }
/风格
点击前
点击增加子组件中"增加智力"按钮的时候，父组件和子组件中的智力参数同时从90变为91
点击增加子组件中"增加膜法"按钮的时候，父组件和子组件中的智力参数同时从160变为161
数据双向绑定是把双刃剑
从好处上看：
1.它实现了父子组件数据的"实时"同步，在某些数据场景下可能会使用到这一点
2 .同步提供的语法糖使得双向绑定的代码变得很简单
从坏处上看：
它破环了单向数据流的简洁性，这增加了分析数据时的难度
当sync修饰的prop是个对象
我们对上面的例子修改一下，把数据包裹在一个对象中传递下来：
父组件
模板
div id=父亲
差异
我是父组件
儿子：分析数据。同步=分析数据
/儿子
p智力：{{ analysisData.wisdom }}/p
p膜法：{{ analysisData.magic }}/p
p攻击：{{ analysisData.attack }}/p
p防御：{{ analysisData.defense }}/p
/div
/div
/模板
脚本
从导入儿子/son.vue
导出默认值{
数据：函数(){
返回{
分析数据：{
智慧：90,
魔术：160,
攻击：100,
防守：80
}
}
},
组件：{
儿子：儿子
}
}
/脚本
样式范围
#父亲部门{
填充：10px
边距：10px
边框：1px纯灰；
溢出：隐藏；
}
/风格
子组件
模板
差异
p我是子组件/p
p智力：{{ analysisData.wisdom }}/p
p膜法：{{ analysisData.magic }}/p
p攻击：{{ analysisData.attack }}/p
p防御：{{ analysisData.defense }}/p
按钮@click=增量(智慧)增加智力/按钮
button @click=increment(magic )增加膜法/按钮
button @ click= increment( attack )增加攻击/按钮
button @ click= increment( defense )增加防御/按钮
/div
/模板
脚本
导出默认值{
道具：{
分析数据：对象
},
方法：{
增量（数据名){
设new obj=JSON。解析(JSON。stringify(这个。分析数据))
新对象[数据名称]=1
这个emit(update:analysisData ，newObj)
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
按钮{ float: left }
/风格
演示同上
不要通过在子组件中修改引用类型props达到“父子组件数据同步”的需求！
父组件的数据传递给子组件，一般通过小道具实现，而在实现"父子组件数据同步"这一需求的时候，小伙伴们可能会发现一点：在子组件中修改引用类型的道具（如数组和对象)是可行的
1.不仅可以达到同时修改父组件中的数据（因为本来引用的就是同一个数据)
2.而且还不会被某视频剪辑软件的检测机制发现！（不会报错)
但千万不要这样做，这样会让数据流变得更加难以分析，如果你尝试这样做，上面的做法可能会更好一些
不要这样做，糟糕的做法：
父组件：
模板
div id=父亲
差异
我是父组件
儿子：分析数据=分析数据
/儿子
p智力：{{ analysisData.wisdom }}/p
p膜法：{{ analysisData.magic }}/p
p攻击：{{ analysisData.attack }}/p
p防御：{{ analysisData.defense }}/p
/div
/div
/模板
脚本
从导入儿子/son.vue
导出默认值{
数据：函数(){
返回{
分析数据：{
智慧：90,
魔术：160,
攻击：100,
防守：80
}
}
},
组件：{
儿子：儿子
}
}
/脚本
样式范围
#父亲部门{
填充：10px
边距：10px
边框：1px纯灰；
溢出：隐藏；
}
/风格
子组件：
模板
差异
p我是子组件/p
p智力：{{ analysisData.wisdom }}/p
p膜法：{{ analysisData.magic }}/p
p攻击：{{ analysisData.attack }}/p
p防御：{{ analysisData.defense }}/p
按钮@click=增量(智慧)增加智力/按钮
button @click=increment (magic )增加膜法/按钮
button @ click= increment( attack )增加攻击/按钮
button @ click= increment( defense )增加防御/按钮
/div
/模板
脚本
导出默认值{
道具：{
分析数据：对象
},
方法：{
增量（数据名){
让obj=this.analysisData
对象[数据名]=1
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
按钮{ float: left }
/风格
以上就是某视频剪辑软件中的父子组件通讯以及使用同步同步父子组件数据的详细内容，更多关于某视频剪辑软件的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。