vue 兄弟组件之间事件触发

最新推荐文章于 2024-03-06 23:32:17 发布
最新推荐文章于 2024-03-06 23:32:17 发布
阅读量2w 收藏 3
点赞数 5
分类专栏： Vue.js JavaScript武器库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuoganliwanjin/article/details/78890778
版权
Vue.js 同时被 2 个专栏收录
39 篇文章 17 订阅 ¥19.90 ¥99.00
订阅专栏
JavaScript武器库
74 篇文章 8 订阅
订阅专栏 

直奔肢体

直奔主题！

兄弟组件之间的事件触发，大概思路是通过父级组件交换数据，watch来监听触发事件。

场景是父级组件A同时引用两个子级组件B，C。点击B组件中的按钮执行C组件中的事件。

第一步：父级组件A 

<bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play>
		
	       methods:{
		    listChild:function(val){//B组件自定义事件 状态是布尔值
		      	this.playStatus = val;
		    },
		    btmChild:function(val){//C组件自定义事件
		      	this.btmStatus = val;
		    }
	  	}

第二步：子级组件B代码

props:
了解本专栏 订阅专栏 解锁全文
攻城狮Lee丶
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
基于vue 兄弟组件之间事件触发(详解)
09-09
下面小编就为大家分享一篇基于vue 兄弟组件之间事件触发(详解)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue.js中兄弟组件之间互相传值实例
12-29
兄弟组件之间互相传值，需要建立一个“中转站”（新的vue实例），并且需要主动触发。 实例上的$on方法来接受监听。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>组件传值</title> [removed][removed] </head> <body> ~~~~~~我是哥哥~~~~{{msg}}
vue 自定义事件的实现（可用于兄弟组件通信）
最新发布
朝阳39的博客
03-06 493
点击按钮后。
VUE兄弟组件传值操作实例分析
01-19
本文实例讲述了VUE兄弟组件传值操作。分享给大家供大家参考，具体如下： 1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据 2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。 3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。 4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。 我们可以创建一个单独的js文件eventVue.js,内容如下 import Vue from 'vue'; export de
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue(4)：Vue兄弟组件传值在echarts点击事件中的使用
偉ing的博客
05-18 1303
前言 ​ 最近在用Vue+echarts+d3做一个项目，网上大多数是零散的，我把项目中遇到 的问题都总结起来，放在博客下，便于日后查看以及分享一下爬坑经验。 ​ 我所遇到的困难在网上大多数可以找到，但比较零散，且不好找，这是Vue项目的第四篇博客，因为也是初次使用Vue，所以多详细记录一下。 ​ 这篇博客主要分享的知识点是Vue中父组件传以及echarts鼠标事件中的父组件传值，还解决了一个在父组件传值的过程中div被加载了两次的问题。 1.Vue子组件向父组件传值 ​ 二话不说，先上代码。 子组件代码：
JS - 事件 - 兄弟节点
半夏半暖半倾城的博客
06-22 623
兄弟节点&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;JS&lt;/title&gt; &l
Vue触发兄弟级组件中的某个方法
文龙刚的博客
07-28 650
【代码】Vue触发兄弟级组件中的某个方法。
点击按钮却触发了其他按钮的事件
fulong0406的博客
11-13 801
首先交代一下问题背景：按钮1 是type=“image” 点击按钮1的时候触发了按钮2，奇不奇怪？ 解决方案是把input标签换为img标签 因为input标签会触发 按钮2的事件（input标签点击 时 会触发表单提交事件）！！！ 总结：按钮1 单击的时候触发了按钮2，那么可以再创建不同形式的按钮3啊，如果按钮3还会 触发按钮2的事件，那么就是按钮2事件的问题，不拉不拉，...
Android Listview中Button按钮点击事件冲突解决办法
weixin_34072458的博客
10-18 260
今天做项目时，ListView中含有了Button组件，心里一早就知道肯定会有冲突，因为以前就遇到过，并解决过，可惜当时没有记录下来。 今天在做的时候，继续被这个问题郁闷了一把，后来解决后，赶紧来记录下，以便日后参考。 首先，其实Listview中Button按钮点击事件冲突这种问题压根就不是太大的问题，因为我们完全可以将一个TextVi...
vue事件车的原理与标准写法实现兄弟组件的传值
zxdznyy的博客
01-23 1049
在没有学习兄弟组件的传值时，兄弟组件之间传值可以借助它们共同的父组件：把值传给它们的父组件，再按需要取值（子传父，父再传子）。这样做十分麻烦，本节将提供更简单的做法——事件总线。Vue组件之间的数据共享详解如图，组件结构图如下。现在我们有一个需求，想要将D组件中的数据以参数的形式传递给A组件。怎么实现呢？利用以前的想法，我么可以让D组件先把数据传递给App组件，然后A组件再从App组件中获取数据。这个过程可以利用给组件设置自定义事件来实现。在这个过程中，App组件成了一个联络人。
点击事件总结
qq_45305088的博客
01-21 174
以下情况均没有阻止冒泡 1.A为父节点 B、C为A子节点 并且B、C互为兄弟节点 他们都注册了touchstar事件 B、C谁触发取决于点击的位置在哪里，如果是B、C的公共区域取决于谁在最上层 只要B触发、C的事件一定不触发，反过来一样 B、C节点只要触发，A节点也一定触发 2.如果A、B都注册注册了ouchstar和touchend事件 点击A的区域（不包括B的区域）触发Atouchstar事件，然后把手指移动到B的区域，接着松开屏幕后，会触发A的touchend事件（并不会触发B的touchend事件）
Vue组件间数据交互-父传子，子传父以及兄弟组件传值
qq_43476293的博客
07-21 294
vue.js组件之间的数据交互
vue 使用bus实现组件间（如：兄弟组件）传递事件
cbat的博客
07-08 939
例如兄弟组件A和组件B，B要调用A的某个事件 一、新建bus.js，并引用 /**bus.js**/ import Vue from 'vue' const bus = new Vue() export default bus bus.js我放在src/assets/utils路径下面 二、在B组件页面里 // 引入 bus.js import bus from '@/assets/utils/bus' // 通过$emit() 传递事件 bus.$emit('showTime') // showT
Vue基础知识——兄弟组件通讯（自定义事件的应用）
qq_28695495的博客
10-07 754
3、在兄弟组件2中定义一个点击事件，事件中写上event.$emit("brotherEvent","from data of brother2")。2、在兄弟组件1中定义个onEvent的方法，方法中写上 event.$on("brotherEvent",this.getBrotherData)。4、在兄弟组件1中的beforeDestroy()中销毁定义的事件。1、定义一个普通的vue对象，并引用。以上为完整代码，实际效果为点击兄弟组件2中的事件，将数据传给兄弟组件1。
vue——组件间（兄弟组件间）事件派发与接收
肖的博客
04-13 2200
main.js 在初始化vue之前，给 data 添加一个名为 event 的空vue对象 new Vue({ render: h => h(App), router, store, data: { event: new Vue() } }).$mount('#app') 组件一： methods: { addCart (e) { l...
Vue 组件事件触发另一个组件的事件
qq_44427336的博客
07-21 6312
此方法与Prop类似，区别在于Prop用于子父之间传值，而当前所介绍的方法为任意组件可相互调用定义的属性。 我用此方法需要解决的问题是当我点击一个按钮，需要改变另一个组件的样式，因为我做的是主题切换，很多样式是不能放在一起的。实现就是需要将点击按钮时的一个判断值传入另一个组件，调用方法通过判断值改变样式。具体实现为： 1.定义一个公共的js import Vue from 'vue' export default new Vue() 2.在两个组件中都引入此js import PublicFu
vue 组件事件
技术的搬运工
01-06 875
我们会发现有时候子组件需要与父组件进行交互，当子组件的事件被触发时，父组件可以相对应地做出哪些处理。
vue兄弟组件之间传值
05-09
Vue组件之间传值有多种方式，其中兄弟组件之间传值可以通过以下几种方式实现： 1. 通过父组件传递数据 在父组件中定义一个数据，在子组件中通过props接收，在兄弟组件之间传递数据时，可以将数据传递给父组件，由父组件再将数据传递给另一个子组件。 2. 通过事件总线传递数据 创建一个空的Vue实例作为事件总线，通常在main.js中创建，然后可以在兄弟组件中通过事件总线$emit触发事件，另一个兄弟组件中通过事件总线$on监听事件，从而实现兄弟组件之间的数据传递。 3. 通过Vuex进行状态管理 使用Vuex对应用程序进行状态管理，将需要共享的数据存储在Vuex的store中，兄弟组件可以通过Vuex读写store中的数据，从而实现兄弟组件之间的数据传递。 综上所述，以上三种方式都可以实现兄弟组件之间的数据传递，具体选择哪种方式取决于实际应用场景和个人喜好。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城狮Lee丶

码字不易，客观打个赏吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值