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


Posted in Javascript onJuly 28, 2020

组件之间事件触发

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

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

新增按钮组件:

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

操作按钮组合组件:

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

此时有个需求就是,无论是哪个按钮,如果改变了列表中的数据,列表需要实时更新数据。

此时就需要用到组件间的事件触发。

父子组件之间事件触发可以使用$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。

补充知识:vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例

vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。

首先需要在任意地方添加一个bus.js

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

在bus.js里面 写入下面信息

import Vue from 'vue'

export default new Vue;

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

在需要通信的组件都引入Bus.js

如果你的bus.js是自定义一个bus的文件那from后面就改成你的所放的位置

import Bus from './bus.js'

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

接下来就是要组件通信了

添加一个 触发 #emit的事件按钮

<template>
  <div id="emit">
    <button @click="bus">按钮</button>
  </div>
 </template> 

import Bus from './bus.js' 
export default { 
  data() {
    return {
      message: ''"
    }
   },
methods: {
    bus () {
     Bus.$emit('msg', '我要传给兄弟组件们,你收到没有')
    }
  }
}

打开要和$emit通信的另外一个组件 添加

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

在钩子函数中监听msg事件

<template>
  <div id="on">
      <p>{{message}}</p>
  </div>
</template>

import Bus from './bus.js'
export default {
  data() {
   return {
    message: ''
   }
  },
  mounted() {

let self = this
    Bus.$on('msg', (e) => {
     self.message = e


 console.log(`传来的数据是:${e}`)
    })
   }
  }

最后p会显示来自$emit传来的信息

以上这篇vue 组件之间事件触发($emit)与event Bus($on)的用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
浅谈node的事件机制
Oct 09 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 #Javascript
js实现全选和全不选
Jul 28 #Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 #Javascript
js实现全选和全不选功能
Jul 28 #Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 #Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 #Javascript
Postman如何实现参数化执行及断言处理
Jul 28 #Javascript
You might like
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php笔记之常用文件操作
2010/10/12 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Python多线程实例教程
2014/09/06 Python
Python递归函数定义与用法示例
2017/06/02 Python
python列表返回重复数据的下标
2020/02/10 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Django xadmin安装及使用详解
2020/10/26 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
档案检查欢迎词
2014/01/13 职场文书
美术国培研修感言
2014/02/12 职场文书
校庆活动策划方案
2014/06/05 职场文书
消防安全标语
2014/06/07 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python