Vue 组件间的通信

发布于 2024-06-20 09:42:56 字数 1191 浏览 18 评论 0

兄弟组件之间如何通信

方法一、通过父组件通信

此方法需要保证兄弟组件 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

缘字诀

暂无简介

0 文章
0 评论
22 人气
更多

推荐作者

安静被遗忘

文章 0 评论 0

喔爱吃橙子

文章 0 评论 0

草莓味的萝莉

文章 0 评论 0

梦里兽

文章 0 评论 0

mb_83J3Cyxa

文章 0 评论 0

时间海

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文