Vue 组件间的通信
兄弟组件之间如何通信
方法一、通过父组件通信
此方法需要保证兄弟组件 A、B 都在同一个父组件下;
父组件通过接受子组件 A 传递过来的事件消息,并调用子组件 B
// 子组件 A
this.$emit('transmit', 'msg')
// 父组件
<ChildA @transmit="transmit"></ChildA>
<ChildB :msg="msg"></ChildB>
transmit (data) => {
this.msg = data
}
// 子组件 B、需要使用 watch 来监听父组件 props 穿过来的数据变化
watch (new, old) {
数据操作...
}
方法二、eventBus
通过创建 Bus.js 注册一个全局实例,通讯组件通过调用实例的方法达到通讯目的
创建 Bus.js
// eventBus 共享 vue 实例,用于兄弟组件数据传递
import Vue from 'vue'
const Bus = new Vue({})
export {Bus}
组件 A 导入 Bus.js 并 emit 消息
import {Bus} from './Bus.js'
Bus.$emit('transmit', 'msg')
组件 B 导入 Bus.js 并在 mounted 中检测数据变化
import {Bus} from './Bus.js'
mounted () {
Bus.$on('transmit', (data) => {
// 操作...
})
}
// 由于$on 事件无法主动销毁,所以需要根据业务手动进行销毁
// 在组件销毁前方法中销毁
beforeDestory () {
Bus.$off('transmit')
}
// 或者在使用前进行销毁
mounted () {
Bus.$off('transmit')
Bus.$on('transmit', (data) => {
// 操作...
})
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
上一篇: Canvas 之滤镜的介绍和使用
下一篇: 彻底找到 Tomcat 启动速度慢的元凶
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论