Vue 组件事件触发另一个组件的事件

此方法与Prop类似，区别在于Prop用于子父之间传值，而当前所介绍的方法为任意组件可相互调用定义的属性。

我用此方法需要解决的问题是当我点击一个按钮，需要改变另一个组件的样式，因为我做的是主题切换，很多样式是不能放在一起的。实现就是需要将点击按钮时的一个判断值传入另一个组件，调用方法通过判断值改变样式。具体实现为：

1.定义一个公共的js

import Vue from 'vue'
export default new Vue()

2.在两个组件中都引入此js

import PublicFunction from '../../publicFunction'

3.定义按钮方法

show = truebeta() {PublicFunction.$emit('demo', this.show)this.show = !this.show
}

我设置了一个点击事件，点击时触发beta函数，并将方法写入引入的js，传入的参数就是show

4.调用方法

beta(show) {if (show) {this.defaultBackgroudColor = 'rgb(184,183,183)'} else {this.defaultBackgroudColor = 'rgb(247,247,247)'}}mounted() {PublicFunction.$on('demo', (show) => {this.beta(show)})}

技术栈使用的主要是Vue和typescript，所以代码风格和传统Vue有点不同，上面的方法和数据必要时需要放在指定的位置。

不过此方法尽量不要使用，存在方法会被调用两次的bug，原因是切换主题时触发页面重新渲染，点击时触发一次，渲染又会触发一次，如果方法本身有改变布尔值，绝对不能使用，相当于true变换两次重新变回true。

方法参照了https://www.cnblogs.com/shun1015/p/13821684.html大大的，如有侵权请联系删除。

Vue 组件事件触发另一个组件的事件相关推荐

jq实现点击一个按钮，触发另一个点击事件（点击按钮触发另一个按钮的点击事件）
jq实现点击一个按钮,触发另一个点击事件 $("#a").click(function(){$("#b").trigger('click');}) 实现点击完i ...
Vue.js 3 Step 创建一个组件
Step1:Vue.extend()创建组件 Step2:Vue.component()注册组件,注册的标签一定要用小写 Step3:挂载点使用组件 <!doctype html> < ...
vue如何在一个组件中引用另外一个组件并使用?有两种方法
方法一:代码如下 <template><div><testComponent></tes ...
Python Opencv 实现鼠标事件（包含一个练习）——事件触发讲解·以及鼠标回调函数的实现
文章目录鼠标事件概述鼠标事件发生的结构鼠标回调函数的标准格式 opencv下包含的所有事件--包含flag和event(可以看一下,熟悉常见事件范围) 鼠标事件的实现函数一个完整的鼠标事件由一 ...
oracle logfile sync,oracle等待事件3构造一个DirectPathwrite等待事件和构造一个LogFileSync等待事件...
第一篇<oracle等待事件1分别用表和索引上数据的访问来产生dbfilescatteredread等待事件>http://leonarding.blog.51cto.com/604552 ...
c#中在一个窗体中触发另一个窗体的事件
创建两个窗体,分别为form1,form2,在form1中添加控件textBox1和button1,创建一个form2的对象Form2 b = null; 在form2中添加button1,定义委托和 ...
vue中点击加号_vue 组件之间事件触发($emit)与event Bus($on)的用法说明
组件之间事件触发之前使用组件,并不是很频繁,是水平的问题,目前工作中,公司大佬带着我手写过一个组件,再此很感谢他的指导.目前简单的组件已经有了自己的逻辑思维,正在从低级码农向中级码农蜕变.废话不多说 ...
Vue中，一个组件调用其他组件的方法（非父子组件）
Vue中,一个组件调用其他组件的方法(非父子组件) 场景--B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式 1.当前组件引入将要调用方法 ...
vue的$emit 与$on父子组件与兄弟组件的之间通信
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信一.父组件传值给子组件父组件 ...

Vue 组件事件触发另一个组件的事件

Vue 组件事件触发另一个组件的事件相关推荐

最新文章

热门文章