简答vue中的父组件与子组件进行通信有哪几种方式,vue3父子组件通信
本文主要介绍了Vue组件的通信方式(父亲对儿子，儿子对父亲，兄弟对兄弟通信)，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
父组件向子组件传输，子组件向父组件传输值，非父子传输参数(事件总线)vue跨页双向通信同源通信非同源通信
父组件传到子组件
父组件通过props属性与子组件通信。
是单向数据流的父子(修改子组件中的道具数据无效，会有红色警告)。
1. 父组件parent.vue代码如下：
模板
div class=parent
h2{{ msg }}/h2
儿子：fa-msg= msg /儿子！-子组件绑定faMsg变量，注意驼峰-
/div
/模板
脚本
从导入。/son //引入子组件
导出默认值{
名称：“HelloWorld”，
data () {
返回{
消息：“父组件”，
}
},
组件：{son}，
}
/脚本
2. 子组件son代码如下：
模板
儿子
p{{ sonMsg }}/p
Pcomponent收到的内容：{{ faMsg }}/p
/div
/模板
脚本
导出默认值{
姓名：儿子，
data(){
返回{
子：“子组件”，
}
},
Props:[faMsg]，//接收psMsg值
}
/脚本
子组件通过props来接受数据
第一个方法属性：[childCom]
第二种方法道具：{
ChildCom: String //在此指定字符串类型。如果类型不一致，将会警告您。
}
第三种方法道具：{
childCom: {
类型：字符串，
默认：“司朝云”
}
}
子组件向父组件传值
通过绑定事件传递值，然后$emit。
Vue2.0只允许单向数据传输，我们通过离职事件来改变组件的数据。
1.父组件parent代码如下：
父组件通过绑定自定义事件接受子组件传递的参数。
模板
div class=parent
h2{{ msg }}/h2
p父组件继承的内容：{{ username }}/p
Psmsg=我是你爸爸 @transfer=getUser/son
！-侦听由子组件触发的传输事件，然后调用getUser方法-
/div
/模板
脚本
从导入儿子。/儿子
导出默认值{
名称：“HelloWorld”，
data () {
返回{
消息：“父组件”，
用户名：，
}
},
组件：{son}，
方法：{
getUser(消息){
this .用户名=消息
}
}
}
/脚本
2.子组件son代码如下：
子组件通过$emit触发父组件上的自定义事件来发送参数。
模板
儿子
p{{ sonMsg }}/p
Pcomponent收到的内容：{{ psMsg }}/p
！-input type= text v-model= user @ change= setUser --
Button @click=setUser 传递值/button
/div
/模板
脚本
导出默认值{
姓名：儿子，
data(){
返回{
子：“子组件”，
用户：“从子到父的内容”
}
},
道具：[psMsg]，
方法：{
setUser:function(){
这个。$ emit (transfer ，this.user)//触发transfer方法，其中this . user是传递给父组件的数据。
}
}
}
/脚本
非父子传参 （事件总线）
假设你有两个需要通信的Vue组件：A和B，组件A的按钮绑定了一个click事件，该事件发送消息，组件B接收消息。
1. 初始化，全局创建$bus
直接在项目的main.js中初始化$bus:
//main.js
窗户。$ bus=new Vue()；
注意，这个方法初始化一个全局事件总线。
2. 发送事件
$巴士。$emit(aMsg ，来自A页的消息)；
！- A.vue -
模板
button @ click= sendMsg()-/button
/模板
脚本
//从导入$bus./bus . js ；
导出默认值{
方法：{
sendMsg() {
$巴士。$emit(aMsg ，来自A页的消息)；
}
}
};
/脚本
接下来，我们需要在页面b中接收这条消息。
4. 接收事件
$巴士。$on(事件名称，回调)
！- IncrementCount.vue -
模板
p{{msg}}/p
/模板
脚本
//从导入$bus./bus . js ；
导出默认值{
data(){
返回{
邮件：“”
}
},
已安装(){
$巴士。$on(aMsg ，(msg)={
//已发送的消息
this.msg=msg
});
}
};
/脚本
下方是拓展，面试不必说
Bus建议采用以下写法：
集中式事件中间件是总线。我习惯于全球范围内定义公共汽车：
app.js
var eventBus={
安装(Vue，选项){
Vue.prototype.$bus=vue
}
};
vue . use(eventBus)；
然后，在组件中，您可以使用$emit、$on和$off来分别分发、监视和取消监视事件：
用于分发事件的组件
//.
方法：{
todo: function () {
这个。$巴士。$emit(todoSth ，params)；//params是传递的参数。
//.
}
}
用于监控的组件
//.
已创建(){
这个。$巴士。$ on (todos th ，(params)={//获取传递的参数并进行运算。
//做某事
})
},
//最好是在组件被破坏之前
//清除事件监控
销毁前(){
这个。$巴士。$ off( tod osth )；
}
如果需要监听多个组件，只需更改总线的eventName:
//.
已创建(){
这个。$巴士。$on(firstTodo ，this . first todo)；
这个。$巴士。$on(secondTodo ，this . second todo)；
},
//清除事件监控
销毁前(){
这个。$巴士。$off(firstTodo ，this . first todo)；
这个。$巴士。$off(secondTodo ，this . second todo)；
}
vue 跨页面双向通信
同源通信
1. localStorage
添加时间监控
window . addevent listener( storage ，function(e){ })；
更改localStorage值并触发存储事件。
window . local storage . setitem( params ，JSON . stringify(object))；
2. 通过跳转 url 传参
//带参数的跳转路径
3. 通过 BroadCast channel 广播实现通信
//创建广播频道
const bc=new BroadcastChannel(辛凯)；
//其他页面可以通过onmessage收听广播消息。
bc.onmessage=function (res) {
const data=res.data
};
//发送消息时直接调用实例上的postMessage方法。
bc.postMessage(数据)；
4. shareWorker
非同源通讯
1. iframe 嵌套
1.发送消息
window.postMessage(消息，目标来源，[传输])
//要传输的消息数据[object]
//目标窗口(URI)，*表示任何窗口都可以无限制接收。
//transfer是与message同时交付的一系列可转移对象。这些对象的所有权将转移到消息的接收者，发送者将不再保留所有权。
2.监控收到的消息。
window . addevent listener( message ，receiveMessage，false)；
//接收消息处理程序[$event]
函数receiveMessage(事件){
//参数事件
//event.data是您传递的参数。
//event.origin发送方用于安全验证的目标url。
//event.source发送方的窗口对象
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。