vue组件间通信六种方式(完整版),vue组件间通信
作为一个vue初学者，我要知道的是组件之间的数据通信(暂且不谈vuex)。根据组件之间的关系，通信方法是不同的。本文主要介绍vue组件间通信的相关信息，有需要的朋友可以参考一下。
目录
前言I，props，$发出单向数据流II，$parent，$children III，$attrs，$listeners IV，provide，inject V，eventBus VI，vuex VII，localstorage summary
前言
沟通在我们平时的开发过程中起着很重要的作用，尤其是在vue和react中。本文将总结vue中组件之间的几种通信方式：
道具、$emit
$父项、$子项
$ attrs ,$ listeners
提供、注入
事件总线
状态管理
本地存储
一、props、$emit单向数据流
父亲：vue:
模板
差异
Div我是父亲：输入type= button value= father /数字为：{{num}}/div
son:num= num @ change= change /son
/div
/模板
脚本
从导入儿子。/son . vue ；
导出默认值{
姓名：父亲，
组件：{
儿子，
},
data() {
返回{
数字：1，
};
},
方法：{
更改(值){
这. num=val
}
}
};
/脚本
son.vue:
模板
我是儿子：输入type= button value= son @ click= change /数字为：{{num}}/div
/模板
脚本
导出默认值{
名称：“应用程序”，
组件：{}，
道具：{
数量：{
默认值：0，
},
},
已创建(){}，
方法：{
更改(){
//this.num=2 props通信是单向数据流。如果在这里直接修改父组件发送的num，会报错。//可以使用$emit触发变更事件，父组件将变更事件绑定到this。$emit(change ，2)
}
},
};
/脚本
对于上面的场景：子组件的change事件只是修改父组件中的一个值，可以这样写：
1.父组件绑定到子组件的事件使用箭头函数。
父亲：
son:num= num @ change= val=num=val /son
儿子：
这个。$emit(change ，2)
2 .更新：num和。同步
父亲：
son :num.sync=num/son
儿子：
这个。$ emit (update: num ，2)//update是规定的写法，不能替换。
3.v型车
首先修改道具和绑定事件：
父亲：儿子：value= num @ input= val=num=val /儿子：这个。$emit(input ，2)
可用的垂直模型简写：son v-model=num/son
二、$parent、$children
$parent和$children可以直接调用各自的方法，修改父子组件中的数据。
直接在子组件中：this。$parent.num=2
父组件中的$children是一个数组，所以它是哪个子组件并不直观。您可以使用$refs来操作子组件。
Vue官方不推荐这种通信方式：保守使用$parent和$ children它们的主要用途是作为一种应急的方法来访问组件，更推荐使用道具和事件来实现亲子组件通信。
三、$attrs、$listeners
$attrs可以获取父组件传递的属性：
我是儿子：输入type= button value= son @ click= change /数字为：{{$attrs}}/div
Dom节点：
$attrs会直接把传递的属性放到相应的标签上，而props不会。如果想去掉标签中的这些属性，可以使用inheritAttrs:
值得注意的是，道具的优先级大于$attrs，即当道具存在时，$attrs为空对象：
$attrs通常用于跨多级组件(如孙组件)传输属性，以父组件作为中转：
父亲：
son v-bind=$attrs/son
$attrs用于属性的跨级传输，而$listeners用于方法的跨级传输。
祖父：vue:
模板
差异
Div是我爷爷：号码是：{{nums}}/div
父亲：nums= nums @ up= up @ down= down /父亲
/div
/模板
脚本
从导入父亲。/father . vue ；
导出默认值{
名称：“应用程序”，
组件：{
父亲，
},
data(){
返回{
数字：0
}
},
方法：{
up() {
警报(“启动”)
}，down() { alert(down)}，
},
};
/脚本
父亲：vue:
son v-bind= $ attrs v-on= $ listeners /son
son.vue:
我是儿子：input type= button value= son @ click= $ listeners . up //div
四、provide、inject
这一对选项需要一起使用，以允许一个祖先组件向它的所有后代注入一个依赖项，不管组件级别有多深，只要建立了上下游关系，它就会一直生效。
提供选项应该是一个对象或一个返回对象的函数。
注入选项应该是字符串数组或对象。
应用程序：
.
导出默认值{
提供(){
返回{vm: this}
},
.
儿子：
.
导出默认值{
inject: [vm]，data(){}，mounted(){ console . log(this . VM)}
.
注意：提供和注入绑定没有响应。这是故意的。但是，如果传入一个可监视的对象，其对象的属性仍会响应。
inject注入的值将按照“邻近原则”在组件中向上搜索。
提供和注入中的数据流是双向的。
五、eventBus(事件总线)
EventBus通过发布订阅全局事件，供其他组件使用。
在main.js中：
Vue . prototype . $ bus=new Vue()；
parent.vue:
模板
差异
son1/son1
son2/son2
/div
/模板
脚本
从导入son1。/son1.vue
从导入son2。/son2.vue
导出默认值{
姓名：家长，
组件：{
son1，
son2
},
已创建(){
这个。$巴士。$on(busEvent ，(v)={
console . log(v)；
})
},
销毁前(){
这个。$bus.off(busEvent )
}
}
/脚本
安装在son1和son2中：
son1:mounted(){
这个。$巴士。$ emit(公交事件，儿子1哈哈)
} son2: mounted () {this。$巴士。$ emit(总线事件， son2嘻嘻)}
打印结果：
使用eventBus时有三点需要注意。1.应该在创建的钩子内部使用$bus.on。如果在mounted中使用，它可能不会从创建的钩子内部接收其他组件发送的事件；
2.应在mounted中使用$bus.emit，等待created中$bus.on事件的绑定完成。
3.发布和订阅的事件需要使用销毁前钩子中的$bus.off来释放，所以在组件销毁后不需要一直监控。
六、vuex
借助vuex的状态管理，实现了组件通信。vuex适用于复杂项目，数据共享频繁，数据量大。
商店/索引. js:
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
const store=new Vuex。商店({
状态：{
isLogin:错误
},
突变：{
loginState (state，isLogin) {
state.isLogin=isLogin
}
}
})
导出默认存储
App.vue:
已创建(){
This.store.commit (LoginState ，true)//将登录状态设置为true
},
son.vue:
模板
Div:我是儿子：input type= button value= son /登录状态：{{isLogin}}/div
/模板
脚本
从“vuex”导入{ mapState }；
导出默认值{
姓名：儿子，
计算值：{
.mapState([isLogin])
}
};
/脚本
七、localstorage
Localstorage是浏览器的本地存储，会长期存储在浏览器中。对于非常大的数据，不建议使用这种方法。
App.vue
已创建(){
localStorage.setItem(isLogin ，true)
},
son.vue:
计算值：{
isLogin(){
返回localStorage.getItem(isLogin )
}
}
常见的组件通信方式基本就是这些。如有遗漏或不足，请在评论区留言！
总结
这就是这篇关于vue组件间通信的文章。有关vue组件之间通信的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。