vue兄弟组件间通信方法,vue组件间通信
组件之间的通信只是组件之间的数据传输。就像我们日常打电话一样，是一种沟通方式。你告诉我你说什么，我告诉你你说什么。你说的是数据。电话是一种通讯方式。无论是Vue还是React，都需要组件之间的通信。
:
目录
1.父子沟通1.1父组件-子组件1.2子组件-父组件2。孙儿之间的交流3。任何组件之间的通信3.1事件总线3.2 Vuex
1. 父子间通信
最常见的就是父子之间的交流，这是一种双向的数据传输。
1.1 父组件 -- 儿子组件
父组件传递数据给子组件的方式是通过Prop传递数据给子组件。
//child.vue
模板
差异
我是我的儿子，我从我父亲那里收到的数据是{{value}}
/div
/模板
脚本
导出默认值{
道具：{
值：字符串
}
}
//App.vue
模板
div id=应用程序
Child :value=x /
/div
/模板
脚本
从导入子级。/组件/子组件
导出默认值{
data(){
返回{
x:‘嗨，孩子’
}
},
组件：{
儿童
}
}
/脚本
1.2 儿子组件 -- 父组件
子组件向父组件传输数据的方式是通过子组件中的$emit触发自定义事件，使用子组件时v-on绑定监听自定义事件。
在这里，的v-on事件通信在使用时作为子组件的事件属性被自动监控。
因此，根据使用子组件时的自定义事件属性，子组件将数据传输到父组件。
//child.vue
模板
差异
我是我的儿子，我从我父亲那里收到的数据是{{value}}
button @click=sayHi
向父组件问好
/按钮
/div
/模板
脚本
导出默认值{
道具：{
值：字符串
},
方法：{
sayHi(){
这个。$emit(sayHi ，嗨，家长！);
}
}
}
/脚本
//App.vue
模板
div id=应用程序
我是父组件，从子组件收到的数据是{{y}}。
child:value= x @ sayHi= y=$ event /
/div
/模板
脚本
从导入子级。/组件/子组件
导出默认值{
data(){
返回{
x:‘嗨，孩子’，
y:“”
}
},
组件：{
儿童
}
}
/脚本
2. 爷孙间通信
祖孙沟通，可以用两次v-on沟通，爷爷和爸爸沟通，然后爸爸和儿子沟通。
您还可以在组件之间使用以下任何一种通信方式。
3. 任意组件间通信
任何组件之间的通信都无法再区分A-to-B通信或B-to-A通信，但这是一种通用方式。谁想发送数据就用对应的API发送数据，谁想接收什么数据就用对应的API接收。
任何组件之间的通信有两种方式，一种是使用EventBus发布订阅模式通信，另一种是使用Vuex通信。
3.1 EventBus
EventBus，字面意思是事件总线。触发事件传输的所有数据都从前门上车，保存在总线上。然后，通过监视由相应事件提供的出口来丢弃相应的事件数据。
EventBus，实际上就是发布订阅模式，意思是谁想把数据发出去，就通过触发自定义事件的API来发布数据；谁需要接收数据信息，谁就通过事件监控的API来监控数据。一旦检测到被监控数据被释放，就会被接收，这就是数据订阅。
EventBus通信模式中最重要的是理解发布和订阅的接口API。在Vue中，Vue实例提供了两个接口，分别是$emit和$on，所以你可以创建一个空的Vue实例来获得这两个接口。
const event bus=new Vue()；
事件总线。$ emit (eventname，[…args])//发布事件
EventBus。$on(事件，回调)//订阅事件
例子如下：
//eventBus.js
从“vue”导入Vue
export const event bus=new Vue()；
//子级
模板
差异
我是我的儿子，我从我父亲那里得到的数据是strong{{value}}/strong。
button @click=sayHi
向父组件问好
/按钮
button @click=sibling
向兄弟组件问好。
/按钮
/div
/模板
脚本
从导入{eventBus}./eventBus.js
导出默认值{
道具：{
值：字符串
},
方法：{
sayHi(){
这个。$emit(sayHi ，嗨，家长！);
},
兄弟(){
eventBus。$emit(兄弟姐妹，嗨，兄弟)；
}
}
}
/脚本
样式范围
强{
颜色：红色；
}
/风格
//兄弟姐妹
模板
差异
我是兄弟组件，从子组件收到的数据信息是strong{{x}}/strong。
/div
/模板
脚本
从导入{eventBus}./eventBus.js
导出默认值{
data(){
返回{
x:“”
}
},
已安装(){
eventBus。$on(sibling ，(msg)={
this.x=msg
})
}
}
/脚本
样式范围
强{
颜色：绿色；
}
/风格
//父级
模板
div id=应用程序
我是父组件，从子组件接收的数据是strong{{y}}/strong。
child:value= x @ sayHi= y=$ event /
兄弟姐妹
/div
/模板
脚本
从导入子级。/组件/子组件
从导入同级。/组件/同级
导出默认值{
data(){
返回{
x:‘嗨，孩子’，
y:“”
}
},
组件：{
孩子，
兄弟
}
}
/脚本
样式范围
强{
颜色：蓝色；
}
/风格
关于EventBus的这一部分可能会有疑问。既然Vue实例中有$emit和$on，为什么不用这个呢？$emit来触发事件和这个。$on接收活动？必须有一个额外的空实例eventBus=new Vue()。这是因为Vue中的每个组件都是Vue的一个独立实例。你在这个Vue实例中触发了这个实例的emit事件，但是不能接收另一个实例的on事件。如果它不在公共汽车上，你如何与事件沟通？所以，需要有一辆公共巴士，也就是事件巴士。
上面例子中的eventBus的使用方法是本地eventBus，谁想使用eventBus都得手动引入。也可以把eventBus全局化，比如挂在vue的原型上。
//main.js
从“vue”导入Vue
从导入应用程序。/App.vue
Vue.config.productionTip=false
Vue . prototype . $ event bus=new Vue()；//加上这句话，必须在下面新的Vue之前。
新Vue({
render: h=h(App)，
}).$ mount(“# app”)
//子级
兄弟(){
这个。$eventBus。$emit(兄弟姐妹，嗨，兄弟)；
}
//兄弟姐妹
已安装(){
这个。$eventBus。$on(sibling ，(msg)={
this.x=msg
})
}
除了以上给Vue prototype添加属性的方式，还可以使用Object.defineProperty()给Vue prototype添加属性。
从“vue”导入Vue
从导入应用程序。/App.vue
Vue.config.productionTip=false
让eventBus=new Vue()
object . define property(vue . prototype， $eventBus ，{
get(){
返回事件总线
}
})
新Vue({
render: h=h(App)，
}).$ mount(“# app”)
3.2 Vuex
Vue组件之间的通信也可以使用状态管理模式：Vuex，这是专门为vue.js应用开发的。Vuex的使用很复杂。详见Vuex博客。Vuex适用于大型复杂Vue项目的状态管理。对于一些中小型的应用，可以根据vuex的原理，自定义状态管理的存储模式，Vue可以自定义状态管理。详见Vue简单状态管理-商店模式博客。
无论是Vuex还是自定义存储模式，组件之间的通信原理都是通过共享数据来实现的。组件使用相同的数据源。当一个组件更改其数据时，另一个组件所依赖的数据源也会更改。
这就是Vue如何实现组件间通信的细节。有关Vue组件间通信的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。