vue如何实现组件通信,vue组件间的通信方式
Ue是数据驱动视图更新的框架，因此组件之间的数据通信对于vue来说非常重要。下面这篇文章主要介绍了在vue中实现组件通信的八种方法，通过示例代码详细介绍，有需要的朋友可以参考一下。
目录
1、props父组件-子组件通信2、$emit子组件-父组件传输3、总线(事件总线)兄弟组件通信4、$parent、$children直接访问组件实例5、$refs6、提供/注入多组件或深层次组件通信7、Slot(slot-scope slot)子元素-父元素(类似于通信)8。vuex状态管理总结对于vue来说，组件之间的消息传递非常重要。下面是我对组件间消息传递的常见方式的总结。
1、props 父组件---子组件通信
父组件属性用于将值传递给子组件。
组件-在props模式下接收数据。
Son :datas=fData/Son
脚本
从“@/components/son”导入Son
导出默认值{
姓名：父亲，
组件：{Son}，
data(){
返回{
FData:“我是父组件传递给子组件的值-props way”
}
}
}
/脚本
子组件属性接受的参数名应该与传递父组件时定义的属性名一致。
模板
Div I是父组件的数据：{{fData}}/div
Div @click=changeData我是传递修改数据的父组件：{{mydata}}/div
/模板
脚本
导出默认值{
姓名：儿子，
道具：{
数据：{
类型：字符串，
默认值：“”
}
}
data(){
mydata:this.fatherData
},
方法：{
changeData(){
This.mydata=更改数据
}
},
}
/脚本
注意：
子组件不能直接修改父组件传递的值：由于Vue的单向数据流机制，直接修改父组件的值会被“污染”。(props是单向绑定(只读属性):当父组件的属性发生变化时，会传递到子组件，反之则不会)
错误信息可能是：vue在使用属性通信时出错：避免直接改变属性，因为当父属性改变时，值将被重写。
解决方案：可以在子组件中定义一个变量mydata来接收fData数据。
如果参数传递类型不确定，可以写成：
道具：{
数据：{
类型：[字符串，数字]，
默认值：“”
}
}
2、$emit 子组件---父组件传递
子组件绑定自定义事件
$emit()的第一个参数是用户定义的事件名称，第二个参数是要传输的数据。
使用$emit()触发更改数据。
组件
El-button @ click= handlemit 更改父组件/el-button
脚本
导出默认值{
姓名：儿子，
方法：{
handleEmit(){
这个。$emit(triggerEmit ，子组件的数据)
}
}
}
/脚本
父组件(子组件发送的事件名称应该与父组件接受的事件名称一致)
Son @ trigger emit= change data /Son
脚本
从“@/components/son”导入Son
导出默认值{
姓名：父亲，
组件：{Son}，
方法：{
changeData(名称){
Console.log(name) //=我是子组件的数据。
}
}
}
/脚本
$emit与props结合 兄弟组件传值
父组件引入了两个子组件。
父组件充当桥梁。
父组件
myName=name/ChildA
ChildB:myName= name @ changeName= editName /ChildB
导出默认值{
data() {
返回{
名称：“你好数据”
}
},
方法：{
editName(name){
this.name=name
}
}
}
组件b改变并接收数据。
p姓名：{{我的姓名}}/p
按钮@click=changeName 修改名称/按钮
脚本
导出默认值{
道具：{
我的名字：字符串
},
方法：{
changeName() {
这个。$emit(changeName ，新数据名称)
}
}
}
/脚本
组件a接收数据。
P name: {{ newName }}/p
脚本
导出默认值{
道具：{
我的名字：字符串
}
}
/脚本
3、bus(事件总线) 兄弟组件通信
非父子组件或更多层间组件传递值。在Vue中，一个独立的事件中心管理组件之间的值传递。
创建一个公共bus.js文件
公开Vue实例
数据发送端触发总线。通过事件发出$emit(方法名，传递的数据)。
在生命周期功能中，接收器通过总线监听。$on(方法名，[参数])
Destroy事件，数据接收器在数据被总线破坏后将无法侦听数据。$off(方法名)
从“vue”导入Vue
const bus=new Vue()
导出默认总线
调用是在需要更改数据的组件中定义的。
模板
差异
我是A/div，通信组件。
按钮@click=changeName 修改名称/按钮
/div
/模板
脚本
从“@/utils/Bus.js”导入总线；
导出默认值{
组件：{}，
data() {
return { }；
},
已安装(){
console.log(总线)；
},
方法：{
changeName() {
公交车。$emit(editName ，数据集！);
},
},
};
/脚本
style lang=scss 范围
/风格
另一个组件也引入了bus.js文件，并通过
模板
差异
Span: {{name}}/span
我是通信组件B/div。
/div
/模板
脚本
从“@/utils/Bus.js”导入总线；
导出默认值{
组件：{}，
data() {
返回{ name }；
},
已安装(){
公交车。$on(编辑名称，(名称)={
this.name=name
console.log(名称)；//
});
},
方法：{}，
};
/脚本
style lang=scss 范围
/风格
4、$parent、$children 直接访问组件实例
子组件通过- $parent获取父组件实例。
父组件通过- $children获取子组件实例的数组。
子组件-这个。$ parent可以获取父组件的方法、数据的数据等。可以直接使用和执行。
模板
我是子组件/分部。
/模板
脚本
导出默认值{
姓名：儿子，
data(){
返回{
SonTitle:“我是一个子组件的数据”
}
},
方法：{
sonHandle(){
Console.log(我是子组件方法)
}
},
已创建(){
console.log(这个。$parent)
Console.log(这个。$ parent.fathertitle)//=我是父组件的数据
这个。$ parent.fantherhandle ()//=我是父组件的方法。
}
}
/脚本
父组件——获取子组件实例，获取的实例是数组的形式。只有这个。$children[0]可以获取一个组件实例，并调用组件方法和数据。
模板
差异
我是父组件/子组件。
/div
/模板
脚本
从导入儿子。/son.vue
导出默认值{
姓名：父亲，
组件：{
儿子
},
data(){
返回{
父标题：“我是父组件的数据”
}
},
方法：{
fantherHandle(){
Console.log(我是父组件的方法)
}
},
已安装(){
console.log(这个。$儿童)
Console.log(这个。$ children [0]。sontitle)//=我是一个子组件的数据。
这个。$ children [0]。sonhandle ()//=我是一个子组件方法
}
}
/脚本
5、$refs
Ref用于注册元素或子组件的参考信息。引用信息将注册在父组件的refs对象上。
父组件使用$refs获取组件实例。
模板
差异
儿子，儿子
/div
/模板
脚本
从导入儿子。/son.vue
导出默认值{
姓名：父亲，
组件：{
儿子
},
已安装(){
Console.log(这个。$refs.son) /*组件实例*/
}
}
/脚本
6、provide/inject(提供/注入) 多组件或深层次组件通信
提供/注入详细的解释
父组件使用provide注入数据
子组件使用inject来使用数据。
/*父组件*/
导出默认值{
提供：{
返回{
ProvideName:“出售前端婴儿”
}
}
}
此时，变量provideName可以提供给它的所有子组件，包括曾孙和孙，并且只能通过使用inject来获取数据。
/*子组件*/
导出默认值{
注入：[provideName]，
已创建(){
console . log(this . providename)//=卖前端宝贝
}
}
父组件不需要知道哪个组件使用它提供的数据。
附件不需要知道这些数据来自哪里。
7、slot（slot-scope作用域插槽） 子元素--父元素（类似于通信）
用作可重复使用的模板(可以传输数据)来替换呈现的元素。
在子组件中，只需将数据传递给插槽，就像将prop传递给组件一样。
注意：父slot接收的内容是最外层的元素，它必须具有属性slot-scope。
继承元素
模板
差异
div class=isSon
slot :info=arrList/slot
/div
/div
/模板
脚本
导出默认值{
组件：{},
data() {
return {arrList:[1， aa ，张三]};
},
已安装(){
},
方法：{
},
};
/脚本
父元素
模板
差异
歌曲
span slot-scope=props
保险商实验所
嗜酒者互诫协会
道具中的物品。 info :key= item
{{item}}
/李
/ul
/span
/宋
/div
/模板
脚本
从导入歌曲./components/SonG.vue
导出默认值{
组件：{
歌曲
},
data () {
返回{
}
}
}
/脚本
8、vuex状态管理
相当于一个公共数据的仓库
提供一些方法管理仓库数据
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
Vue.use(Vuex)
导出默认的新Vuex .商店({
状态：{
},
突变：{
},
动作：{
},
模块：{
}
})
总结
到此这篇关于某视频剪辑软件实现组件通信的八种方法的文章就介绍到这了，更多相关某视频剪辑软件实现组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。