vue组件间通信六种方式(完整版),vue父子组件通信
本文主要介绍Vue组件通信方法的案例总结。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。
:
目录
1.父组件将值转移到子组件(props) 2。子组件将值传递给父组件($emit) 3。姐妹组件传输值(EventBus)1。初始化(newVue())2。发送事件($emit())3。接收事件($on())4
一、父组件向子组件传值（props）
步骤：
在父组件中，数据通过v-bind传递给子组件。
在子组件中，父组件传递的数据是通过props接收的。
div id=应用程序
！-1.通过v-bind将数据传递给子组件
测试v-bind:ss=name/test
/div
脚本
var a=新Vue({
埃尔： #app ，
数据：{
姓名：冰，
},
组件：{
测试：{
道具：[ss]，//2。接收父组件传递的数据。
模板：“p{{ss}}/p”
}
}
})
/脚本
道具使父子之间产生了单向数据流。当父元素更新时，子元素的状态也会改变。
反而会让你的应用的数据流难以理解，所以在子组件中不能修改父组件中的数据之间。
二、子组件向父组件传值（$emit）
子组件通过$emit事件向父组件发送消息，并将自己的数据传递给父组件。
步骤：
在子组件上绑定一个click事件来触发increment方法。
在increment方法中，用$emit定义一个自定义事件增量，并传入this.counter参数。
将步骤2中自定义的增量事件绑定到父组件上。该方法称为incrementTotal。
在父组件中调用步骤3中的incrementTotal方法，然后incrementTotal方法可以接收子组件传入的参数。
div id=应用程序
p{{ total }}/p
按钮计数器v-on:increment= increment total /按钮计数器！第三步
/div
脚本
Vue.component(按钮计数器，{
template: button v-on:click= increment { { counter } }/button ，//步骤1
数据：函数(){
返回{
计数器：“子组件数据”
}
},
方法：{
增量：函数(){
这个。$emit(increment ，this . counter)；//第二步
}
}
});
新Vue({
埃尔： #app ，
数据：{
总计：父组件的数据：
},
方法：{
IncrementTotal:函数(e) {//步骤4
this.total=this.total e[0]
console . log(e)；
}
}
})
/脚本
三、兄弟组件传值（EventBus）
如果不需要Vuex这样的库来处理组件之间的数据通信，可以考虑Vue中的事件总线（EventBus）来进行通信。
在Vue中，EventBus可以作为通信桥的概念，就像所有组件共享同一个事件中心，可以注册发送或接收事件，所以所有组件可以上下并行通知其他组件。
但是，它太方便了，所以如果使用不慎，就会造成难以维持的“灾难”。所以需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态的层面。
这种方法是创建一个空的vue实例，作为$emit事件的处理中心(事件总线)，通过它触发和监控事件，从而方便地实现任意组件之间的通信，包括父、子、兄、隔代组件。如下所示：
1. 初始化（new Vue()）
首先，您需要创建事件总线并将其导出，以便其他模块可以使用或监听它。
我们可以用两种方法来处理它。
方法一：创建新的event-bus.js文件
//event-bus.js
从“vue”导入Vue
export const EventBus=new Vue()
方法二：直接在项目的main.js中初始化EventBus
//main.js
vue . prototype . $ EventBus=new vue()//注意：这样初始化的event bus是一个全局事件总线。
现在我们已经创建了EventBus，接下来你需要做的就是把它加载到你的组件中，调用同样的方法，就像你在父子组件中互相传递消息一样。
2. 发送事件（$emit()）
假设有两个Vue页面需要通信：A和b，A页面将一个click事件绑定到按钮，发送消息通知b页面。
！- A.vue -
模板
button @ click= sendMsg()-/button
/模板
脚本
从导入{ EventBus }./event-bus . js ；
导出默认值{
方法：{
sendMsg() {
事件。$ emit (AMSG ，来自A页的消息)；//向外界发送数据
}
}
};
/脚本
3. 接收事件（$on()）
接下来，你需要在B页收到这条消息。
！- B.vue -
模板
p{{msg}}/p
/模板
脚本
从导入{ EventBus }./event-bus . js ；
导出默认值{
data() {
返回{
邮件：“”
}
},
已安装(){
事件。$ on (amsg ，(msg)={//接收a发送的消息。
this.msg=msg
});
}
};
/脚本
4. 移除事件监听者
如前所述，如果使用不当，EventBus将是一场灾难。是什么样的“灾难”？大家都知道vue是单页应用。如果刷新某个页面，相关的EventBus会被移除，导致业务失败。即使业务有重复操作的页面，EventBus在监听时也会多次触发，这也是一个非常大的隐患。这时候就需要妥善处理好EventBus和项目的关系。通常，当vue页面被销毁时，EventBus事件监控也同时被移除。
如果您想删除对事件的监控，您可以按如下方式进行：
从导入{ EventBus }./event-bus . js ；
EventBus。$off(aMsg ，{})
EventBus。$off(aMsg )删除应用程序中对此事件的所有监视。
或者直接调用EventBus。$off()移除所有事件通道，而不添加任何参数。
四、Vuex
在做中大型单页面应用的时候，比如多人协同开发，全局维护登录状态，我们最好选择vuex进行状态管理。
Vuex详细解释门户
本文关于Vue组件通信方法的案例总结到此为止。关于Vue组件通信方法的更多总结内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。