vue组件之间的通信方式,vuejs组件通信
本文主要详细介绍了Vue组件之间的通信。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
VUE部件1之间的通信。将数据从父级传递到子级1。大写props2。道具的两种写法3。路过动态道具2。将数据从子节点传递到父节点3。在兄弟(任意)组件之间传递值3.1全局事件总线3.2消息订阅和发布摘要
Vue组件间通信
vue组件间通信分为以下几种：
将数据传递给父级，用自定义属性将数据传递给父级，在自定义事件兄弟(any)组件之间传递数据，用全局事件总线或消息订阅和发布回。如果面试问题让你简单描述一下，请拿上面那段回答一下。下面简单介绍一下这些沟通方式的简单用法。
1.父向子传递数据
如前所述，父节点使用自定义属性将数据传递给子节点。接下来，我们来看看代码是怎么写的。
//这是父组件，Father.vue
模板
div class=父亲
！-父组件将person对象传递给子组件-
Son :person=person/
/div
/模板
脚本
导出默认值{
data (){
返回{
人：{姓名：张三，年龄：18岁，性别：男 }
}
}
}
/脚本
//这是子组件，Son.vue
模板
儿子
H2我是子组件/h2
差异
H4个人信息显示/h4
保险商实验所
Li label name:/label span { { person . name } }/span/Li
Li label age:/label span { { person . age } }/span/Li
Li性别：/label span { { person . sex } }/span/Li
/ul
/div
/div
/模板
脚本
导出默认值{
//子组件通过props接收父组件传递的数据。
道具：[人]
}
/脚本
这里说个题外话，简单介绍一下道具。
1.props的大小写
当我们使用自定义属性来传递数据时，自定义属性的名称可能不是简单的一个字，那么这个时候应该怎么写呢？请看下面的代码。
//父组件父组件传递了公司名称
Son company-name= Microsoft /Son
//收到子组件时写入子组件。
脚本
导出默认值{
道具：[公司名称]
}
/脚本
2.props的两种写法
首先是简单的写作。
道具：[姓名，年龄，性别]
第二是对象形式的书写。
道具：{
名称：{
类型：字符串，
必填：真，
默认值：“”
},
年龄：{
类型：数量，
必填：真，
默认值：0
},
性别：字符串
}
两种写法根据实际情况而定，一般第一种能满足需求。
3.传递动态props
通过v-bind传递组件的动态数据类型
Son:category list= category list /Son
脚本
导出默认值{
data (){
返回{
//购物车列表数据
categoryList:[]
}
}
}
/脚本
2.子向父传递数据
如前所述，孩子向父母传递数据需要使用自定义事件，但这里也可以通过自定义属性来实现。让我们来看看。
//子组件Son.vue
模板
儿子
Button @ click= sendmsgfather 发送消息/按钮
/div
/模板
脚本
导出默认值{
道具：[getSonMessage]，
方法：{
sendMsgForFather(){
This.getSonMessage(`我是子组件，你好`)
}
}
}
/脚本
//父组件Father.vue
模板
div class=父亲
H1我是父组件/h1
son:getSonMessage= getSonMessage /
/div
/模板
脚本
从“@/components/Son.vue”导入儿子
导出默认值{
组件：{
儿子
},
方法：{
getSonMessage(msg){
Console.log(`我收到了来自子组件的信息：$ { msg } `)；
}
}
}
/脚本
以下代码是通过自定义事件实现的。
//子组件Son.vue
模板
儿子
Button @ click= sendmsgfather 发送消息/按钮
/div
/模板
脚本
导出默认值{
道具：[getSonMessage]，
方法：{
//向父组件发送信息
sendMsgForFather(){
这个。$emit(eventN ，`我是子组件，你好)
}
}
}
/脚本
//父组件Father.vue
模板
div class=父亲
H1我是父组件/h1
Son @eventN=demo/
/div
/模板
脚本
从“@/components/Son.vue”导入儿子
导出默认值{
组件：{
儿子
},
方法：{
演示(消息){
Console.log(`演示功能被触发，$ { msg } `)；
}
}
}
/脚本
其实理解起来很简单。将自定义事件绑定到子组件，子组件上的自定义事件由$emit触发，而$emit由子组件上的按钮点击事件触发。最后将数据发送给父组件，父组件通过demo函数获取并显示数据。估计听了我说的话，肯定上当了。研究一下代码，自己敲一下就明白了。
3.兄弟(任意)组件间的传值
组件之间传递值的方法有很多，包括我们甚至可以一层一层地使用自定义属性和自定义事件，但是代码可能看起来不那么舒服，甚至会让自己晕头转向。我自己也试过，就想想这个方法就知道了。太没效率了。接下来，我们来谈谈目前主流的几个兄弟组件之间的值传递方法。
3.1全局事件总线
//在//main.js中安装全局事件总线
新Vue({
render: h=h(App)，
创建之前(){
Vue.prototype.$bus=this //安装全局事件总线
}
}).$ mount(“# app”)
//消息发送方SendCom.vue
模板
div class=发送容器
！- SendCom向组件GetMsg发送信息，并通过$emit-触发自定义事件
Button @click=sendMsg 发送消息/按钮
/div
/模板
脚本
导出默认值{
方法：{
sendMsg(){
这个。$巴士。$emit(eventB ， hello )
}
}
}
/脚本
//消息接收方GetMsg.vue
模板
div class=" get-msg-container "
/div
/模板
脚本
导出默认值{
已安装(){
console . log(this)；
这个。$巴士。$on(eventB ，(data)={
Console.log(`我是事件接收方Demo2，收到数据$ { data } `)；
});
},
销毁前(){
这个。$巴士。$off(eventB) //使用后取消绑定事件
}
};
/脚本
3.2消息订阅与发布
在原生js下，消息的订阅和发布是复杂的。这里使用了第三方库pubsub-js，并通过npm i pubsub-js安装。
//消息订阅者(接收者)Subscribe.vue
模板
div class=订阅
/div
/模板
脚本
从 pubsub-js 导入pubsub
导出默认值{
已安装(){
this . pubid=pubsub . subscribe( message ，(msgName，data)={
Console.log(`我收到了消息${msgName}，内容为$ { data } `)；
})
},
销毁前(){
pubsub.unsubscribe(this.pubId)
}
}
/脚本
//消息发布者(发送者)Publish.vue
模板
div class="发布"
Button @click=sendMsg 单击发送/button
/div
/模板
脚本
从 pubsub-js 导入pubsub
导出默认值{
方法：{
sendMsg(){
Pubsub.publish(消息，这是订阅的消息)
}
}
}
/脚本
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。