vue中点击加号_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
在bus.js里面 写入下面信息
import Vue from 'vue'
export default new Vue;
在需要通信的组件都引入Bus.js
如果你的bus.js是自定义一个bus的文件那from后面就改成你的所放的位置
import Bus from './bus.js'
接下来就是要组件通信了
添加一个 触发 #emit的事件按钮
按钮
import Bus from './bus.js'
export default {
data() {
return {
message: ''"
}
},
methods: {
bus () {
Bus.$emit('msg', '我要传给兄弟组件们,你收到没有')
}
}
}
打开要和$emit通信的另外一个组件 添加
在钩子函数中监听msg事件
{{message}}
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)的用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
时间: 2020-07-28
vue中点击加号_vue 组件之间事件触发($emit)与event Bus($on)的用法说明相关推荐
- Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
- vue中点击按钮切换图片
vue中点击按钮切换图片 直接附上代码,亲测有效 <!-- --> <template><div><div class="">< ...
- vue 组件不受全局样式影响_Vue 组件之间样式冲突
Vue 组件之间样式冲突 vue 组件化,各组件内都可以在 style 部分写样式,这些样式却不是相互独立的,最终组合在一起,难免就会产生样式的污染. 首先来看一下两个 vue 组件代码: 1.Par ...
- vue 修改div宽度_Vue 组件通信方式及其应用场景总结(1.5W字)
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰.今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其 ...
- vue向ifarm传值_vue组件间传值
目前流行组件化开发,vue组件间传值是一个非常常用的功能,有时候仅仅是父子和兄弟之间简单的传值,我们就没有必要直接引入vuex来进行管理. # 1.父子间传值 ## 1.1 子组件向父组件传值 子组件 ...
- 触发父组件变量_Vue组件之间的传值
我们知道组件之间传值无非就三种情况 父组件给子组件传值 子组件给父组件传值 兄弟组件之间的传值 父 => 子 老王是个有钱人,准备把自己的家产传给宝贝儿子小王 用代码模拟实现就是下图这样 现在小 ...
- Vue项目中实现父子组件之间传值
1.路由配置:使用children属性实现路由嵌套,嵌套的组件关系就是父子组件关系 {path: '/father',name: 'father',component: father,children ...
- vue设置标签自定义属性_Vue组件化开发之插槽
插槽为组件提供了强大的扩展能力.我们可以把电脑的主板理解为一个已经封装好的组件,主板上都会预留各种插槽,我们可以往插槽中插入内存条.显卡.声卡等设备.基于同样的思想,Vue在封装组件时,也可以预留插槽 ...
- 使用vuex对兄弟组件传值_vue组件之间相互传值的方式
我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
最新文章
- 基于Spark的大规模推荐系统特征工程
- bootstraptable 列隐藏_bootstrapTable 隐藏某一列
- HDOJ1540 - Tunnel Warfare 线段树区间合并
- PHP的var_dump(‘1‘==‘1e0‘)的结果为true
- 按 结构记录的 相关字段 快速排序
- 太阳能板清洗机器人科沃斯_科沃斯推出水清洗扫地机器人 要把打扫做的更彻底...
- CoreAnimation编程指南(简介)
- Heartbeat(v1、v2、pacemaker)集群组件概述
- 中文版Photoshop.CS6完全自学教程 李金明.全彩版.pdf
- android 互传文件,堪比隔空投送!iPhone和安卓、PC互传文件的3种方法,建议收藏...
- python词频统计_用Python实现一个词频统计(词云+图)
- Python图像增强(翻转和旋转)
- 虚幻4渲染编程(光线追踪篇)【第一卷:光线追踪篇开篇综述】
- 利用谷歌语法查找网站后台和数据库
- 【手写 Vue2.x 源码】第十九篇 - 根据 vnode 创建真实节点
- 曾风靡全国的五笔输入法要淘汰了?
- layui数据表格分页简单实现
- 【micorpython】ESP32——CAM 刷固件后显示Device is busy or does not respond. Your options:解决方法
- Java八种基本类型基础
- 齐治堡垒机_任意用户登录漏洞
热门文章
- python获取excel特定区域_python获取excel指定区域数据库-女性时尚流行美容健康娱乐mv-ida网...
- 基于jsp的农产品销售管理系统设计与实现(项目报告+答辩PPT+源代码+数据库+截图+部署视频)
- CAD软件中图块转化命令怎么用?
- 服务器项目文件,文件服务器的项目
- spring事务注解@Transactional参数详解
- 别让非理性思维毁了你的人生
- mysql 使用mybatis保存图片
- 将任意网站打包为桌面程序-低调小熊猫的技术小黑屋
- 对mac系统的初步认识
- python一般安装哪个盘_python要安装在哪个盘