vue 父组件传递子组件事件
在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用
<el-col v-for='data in spreadFormat.icons' class="" v-typeClick='data' :span='2' >{{data.icon}}</el-col>
//点击方法(method)在data中,由父组件通过子组件props传过来
这里并不能直接用on-click:typeClick = data.method;理由是vue自定义的点击事件似乎不能直接写方法,一般是在methods里面定义,调入。这里我想到的一个处理方法,就是自己写一个directive:
directives:{
typeClick:{
bind(el, binding, vnode){
console.log(binding.value.method)
el.addEventListener('click', binding.value.method)
}
}
}
这样既可给这个元素添加了点击事件,并且调用的是父组件传过来的方法。
vue 父组件传递子组件事件的更多相关文章
- Vue父组件与子组件传递事件/调用事件
1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...
- vue 父组件向子组件传递事件/调用事件
方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(functio ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 父组件往子组件传递方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转] vue父组件触发子组件事件
1. 父组件中获取子组件方法 $children 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template> < ...
- vue父组件与子组件之间的数据传递
父组件向子组件传递数据 父组件用数据绑定:子组件用props接收 <!-- test-vue-model父组件 --> <template> <div> <m ...
随机推荐
- 201521123114 《Java程序设计》第2周学习总结
#1. 本周学习总结 1. 学会了使用码云管理代码,使用eclipse关联jdk源代码: 2. 学习了包管理机制,包的作用:主要是管理java文件,解决同名文件冲突; 3. ArrayList可以处理 ...
- 201521123060 《Java程序设计》第11周学习总结
1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2.书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...
- MySql数据库第一天
LAMP linux apache mysql php的关系服务器软件 “服务器” 数据库 操作 mysql常用数据类型:int varchar float double bit datetime. ...
- [07] ServletContext上下文对象
1.上下文的概念 我们在说到Servlet的继承关系时,提到自定义Servlet实际上间接实现了Servlet和ServletConfig两个接口,其中ServletConfig接口中定义了一个方法叫 ...
- Elasticsearch 的分页报错 result window is too large
检查自己分页查询的代码 Pageable pageable = new PageRequest(0, 10000); searchQuery.setPageable(pageable); // 分页效 ...
- 嵌入式Llinux学习路线图
版本 日期 作者 说明 V1 2016.07.29 韦东山 第1版本,Android部分未写 我是1999年上的大学,物理专业.在大一时,我们班里普遍弥漫着对未来的不安,不知道学习了物理后出去能做什么 ...
- vim下处理文档中的\r\n\t字符
问题复现 拿到的文档中包含了大量的\r.\n.\t等字符,形如: \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\ ...
- EGit使用教程:第一篇 添加工程到版本控制
配置 确定身份 当每次提交的时候,Git需要跟踪这次提交,确认是哪个用户提交的.用户由 user.name 和 user.email 组成,这个信息包含在 ~/.gitconfig 文件中. ~ 代表 ...
- java中判断字符串是否为数字的方法的几种方法
1.用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = 0; i < str.length(); i++){ ...
- S2_OOP第三章
第一章 多态 概念 多态是具有表现多种型生态的能力的特征,同一个实现接口,使用不同的实例而执行不同的操作 子类转换父类(向上转型) 用父类接受子类,向上转型 向上转型的规则: 讲一个父类的引用志向一个 ...