vue 组件之间事件触发($emit)与event Bus($on)的使用

刺骨的言语ヽ痛彻心扉 2021-07-25 12:29 462阅读 0赞

#### 组件之间事件触发 ####

之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我手写过一个组件，再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维，正在从低级码农向中级码农蜕变。废话不多说。上图看看组件情况。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
新增按钮组件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
操作按钮组合组件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
此时有个需求就是，无论是哪个按钮，如果改变了列表中的数据，列表需要实时更新数据。  
此时就需要用到组件间的事件触发。  
父子组件之间事件触发可以使用$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`。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/481edb1af8b147fc950b66d4bddba1f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/a87b7703a2834c86942d2020e3120d15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/90b1ea3f0e4b426eb26856d2f968c3fc.png