vue通信的几种方式,vue如何实现组件通信
本文主要介绍了vue通信的八种方式，包括props父组件与子组件之间的通信、$emit子组件的父组件传递、$emit与props的兄弟组件之间的值传递等。想了解更多的可以参考下面这篇文章。
目录
一、组件通信1、props父组件-子组件通信2、$emit子组件-父组件通信3、bus(事件总线)兄弟组件通信4、$parent、$children直接访问组件实例5、$refs6、提供/注入多组件或深
一、组件通信
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文件，通过$on监听事件回调
模板
差异
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详解
父组件使用provide注入数据
子组件使用inject来使用数据。
/*父组件*/
导出默认值{
提供：{
返回{
ProvideName:“出售前端婴儿”
}
}
}
此时，变量provideName可以提供给它的所有子组件，包括曾孙和孙，并且只能通过使用inject来获取数据。
/*子组件*/
导出默认值{
注入：[provideName]，
已创建(){
console . log(this . providename)//=卖前端宝贝
}
}
父组件不需要知道哪个组件使用它提供的数据。
附件不需要知道这些数据来自哪里。
7、slot（slot-scope作用域插槽） 子元素--父元素（类似于通信）
用作可重复使用的模板(可以传输数据)来替换呈现的元素。
在子组件中，只需将数据传递给插槽，就像将prop传递给组件一样。
注意：父插槽接收的内容是最外层的元素，必须有一个插槽范围的子元素。
模板
差异
div class=isSon
slot :info=arrList/slot
/div
/div
/模板
脚本
导出默认值{
组件：{}，
data() {
Return {arrList:[1， aa ，张三]}；
},
已安装(){
},
方法：{
},
};
/脚本
父元素
模板
差异
歌曲
span slot-scope=props
保险商实验所
嗜酒者互诫协会
Li v-for= item in props . info :key= item
{{item}}
/李
/ul
/span
/宋
/div
/模板
脚本
从导入歌曲./components/SonG.vue
导出默认值{
组件：{
歌曲
},
data () {
返回{
}
}
}
/脚本
8、vuex状态管理
相当于公共数据的仓库。
提供一些管理仓库数据的方法。
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
导出默认的新Vuex。商店({
状态：{
},
突变：{
},
动作：{
},
模块：{
}
})
关于与vue建立沟通的八种方式的文章到此结束。有关与vue建立通信方式的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。