VUE-兄弟组件通信

最新推荐文章于 2023-07-01 21:06:53 发布
最新推荐文章于 2023-07-01 21:06:53 发布
阅读量68 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WL_creep/article/details/119868710
版权

在父组件引入两个co1和co2两个子组件
在这里插入图片描述

在这里插入图片描述
描述
在父组件里同时引入2个子组件（co1，co2），在co2里想调用co1组件里的某个方法。
在这里插入图片描述

在co2中引入eventBus
通过eventBus.$emit(‘参数名’,参数)像co1组件传递数据

co1同样引入eventBus

在组件创建完毕后 用eventBus使用$on监听 co2传过来的参数名 如果自定义事件被触发的话就执行后面的箭头函数里面的逻辑
在这里插入图片描述
最后的结果 当点击添加按钮的时候两个子组件的值跟着改变
在这里插入图片描述

WL_creep
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue - 兄弟组件通信（eventBus）
王佳斌
03-22 2994
前言 父子组件之间通信需求很常见，本文主要介绍两个毫无关联的兄弟组件之间通信。 使用 EventBus 事件总线，它允许两个子组件直接通信， 并且不需要涉及父组件，耦合低故推荐。 第一步 在组件之外定义一个全新 Vue 实例作为组件间通信的 桥梁，只有这样才能让两个毫无关联的组件建立关联。 在项目任意位置新建 bus.js，写入以下代码： import Vue from 'vue' export default new Vue() 第二步 为了测试，需要在 components 文件夹下，建立
Vue 兄弟组件通信的方法（不使用Vuex）
08-29
本篇文章主要介绍了Vue 兄弟组件通信的方法（不使用Vuex），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue---兄弟组件通信（三种方式） vue bus
热门推荐
web修理工
07-15 1万+
第一种：eventBus 新建一个js文件， 我这里叫做 bus.js； 文件内容： import Vue from 'vue'; export default new Vue(); 然后在你需要触发的 组件中引入 import bus from ‘文件路径’ 执行：bus.$emit('触发名称', 传输的数据 ) 最后在你需要的通信的另一个组件中 mounted生命周期钩子中执行如下： bus.$on('触发名称', res => { /
Vue---兄弟组件通信（三种方式）
像梦巧清的博客
08-10 2712
第一种：eventBus     新建一个js文件， 我这里叫做 bus.js,     文件内容：           import Vue from 'vue';            export default new Vue();    然后在你需要触发的 组件中引入   import   bus  from  '文件路径'          执行：bus.$emit('触发名...
Vue2的vue-cli组件通信
Qiuxuntao的博客
12-14 1266
文章目录一、父亲向儿子通信二、儿子向父亲通信三、兄弟通信 一、父亲向儿子通信 二、儿子向父亲通信 三、兄弟通信
vue3的兄弟组件通信
qq_53244180的博客
11-16 622
vue3的兄弟组件通信
vue中使用兄弟组件通信
weixin_45160383的博客
08-18 458
template > < div > < button @click = "sendMessage" > 发送消息 < / button > < / div > < / template > < script > import bus from './eventBus' export default {data() {return {
Vue-组件通信6种方式
weixin_44286392的博客
08-16 1900
组件通信方式
Vue组件的通信---兄弟组件间的通信
m0_62763606的博客
07-01 1140
假定有A、B两个组件要进行通信，组件A向组件B发送数据，则要将A组件中的数据通过emit方法发射出去并由父组件接收，而后被父组件再通过自定义属性的方法完成向B组件数据传输。组件B向组件A发送数据的方法相同。前两部分主要讲的是组件嵌套时其间的通信问题，组件之间除去嵌套，并列也极为常见。解决这类组件的通信问题，在这里学习两种方法：1、使用父组件作为兄弟组件通信的中转点；其方法是通过新建的bus实例来使用emit方法发射数据，目标组件接收数据需要在mounted钩子函数内部使用bus实例的on方法完成。
vue3兄弟组件通信-mitt
青春正在燃烧的博客
10-24 764
vue3兄弟节点通信使用mitt
vue3实现兄弟组件通信
weixin_68557949的博客
03-23 808
第二步：新建一个文件夹，再建一个js文件用来创建新的vue实例。第三步：在需要用到的组件中引入bus.js。兄弟组件传值使用mitt插件。1.一个组件触发事件发送值。bus.js内容如下。第一步：安装mitt。2.另一个组件接收值。
vue 解决兄弟组件、跨组件深层次的通信操作
10-15
主要介绍了vue 解决兄弟组件、跨组件深层次的通信操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现的组件兄弟间通信功能示例
10-17
主要介绍了vue实现的组件兄弟间通信功能,结合实例形式分析了vue兄弟组件间通信的原理与相关操作技巧,需要的朋友可以参考下
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
10-15
主要介绍了vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
01-19
本文实例讲述了vue实现父子组件之间的...www.jb51.net vue父子组件通信、兄弟组件通信</title> <style> *{ margin: 0; padding: 0; list-style: none; } table{ text-align: center; margin:0 aut
操作系统期末复习笔记！
06-13
操作系统期末复习笔记
pyzmq-22.0.0-cp38-cp38-manylinux2010_i686.whl
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
pyzmq-25.1.1b2-cp37-cp37m-win_amd64.whl
最新发布
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
香港某银行-CRYPTO业务资料
06-13
香港某银行--CRYPTO业务资料
ArkUI-兄弟组件通信
06-06
兄弟组件通信是指在同一个父级组件下的两个子组件之间进行通信。 在ArkUI中，可以使用事件总线（Event Bus）来实现兄弟组件通信。事件总线是一个空的Vue实例，用于组件之间的事件通信。具体实现步骤如下： 1. 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值