组件之间事件触发
之前使用组件,并不是很频繁,是水平的问题,目前工作中,公司大佬带着我手写过一个组件,再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维,正在从低级码农向中级码农蜕变。废话不多说。上图看看组件情况。
新增按钮组件:
操作按钮组合组件:
此时有个需求就是,无论是哪个按钮,如果改变了列表中的数据,列表需要实时更新数据。
此时就需要用到组件间的事件触发。
父子组件之间事件触发可以使用$emit
$emit的使用方法如下:
在子组件中,写一个click点击事件。比如:
cancelCU() {
this.dialogVisible = false;
this.$emit('closeAdd')
}
然后在父组件中子组件上,添加一个 @closeAdd="closeAddClick"
,closeAddClick
函数就是执行了。
新增按钮可以使用这种方式。但是操作按钮组合中的组件,就属于孙子组件了,孙子组件执行click事件,列表数据需要刷新,此时通过孙子组件触发父组件事件,父组件触发爷爷组件,就比较麻烦了,此时可以通过event bus
实现跨组件的事件触发了。
具体使用方法如下:
第一步:
新建一个js
文件,来创建出我们的eventBus
,我们把它命名为bus.js
内容如下:
import Vue from 'vue';
export default new Vue();
第二步:
在孙子组件和爷爷组件中,都需要引入这个bus.js
import Bus from 'common/js/bus.js';
孙子组件执行方法如下:
addCart(event) {
//如果传递参数的话,可以如下这样写
Bus.$emit('getTarget', event.target);
//如果不传递参数可以如下;
Bus.$emit('getTarget');
}
这里我们在click组件中每次点击,都会在bus中触发这个名为’getTarget’的事件,并将点击事件的event.target顺着事件传递出去。
接着,我们要在show组件中的created()钩子中调用bus监听这个事件,并接收参数:
created() {
//如果传递参数的话,爷爷组件需要这样接收
Bus.$on('getTarget', target => {
console.log(target);
});
//如果不传递参数的话,则可以如下处理
Bus.$on('getTarget',()=>{
//此处执行对应的函数操作
})
}
这样,在每次click
组件的点击事件中,就会把event.target
传递到show
中,并console
出来。
所以eventBus
的使用还是非常便捷的,但是如果是中大型项目,通信比较复杂,还是建议大家直接使用vuex
。