在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用

 

<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 父组件传递子组件事件的更多相关文章

  1. Vue父组件与子组件传递事件/调用事件

    1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...

  2. vue 父组件向子组件传递事件/调用事件

    方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(functio ...

  3. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue 父组件往子组件传递方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  6. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  7. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [转] vue父组件触发子组件事件

    1. 父组件中获取子组件方法 $children 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template>     < ...

  9. vue父组件与子组件之间的数据传递

    父组件向子组件传递数据 父组件用数据绑定:子组件用props接收 <!-- test-vue-model父组件 --> <template> <div> <m ...

随机推荐

  1. 201521123114 《Java程序设计》第2周学习总结

    #1. 本周学习总结 1. 学会了使用码云管理代码,使用eclipse关联jdk源代码: 2. 学习了包管理机制,包的作用:主要是管理java文件,解决同名文件冲突; 3. ArrayList可以处理 ...

  2. 201521123060 《Java程序设计》第11周学习总结

    1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2.书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...

  3. MySql数据库第一天

    LAMP  linux apache mysql php的关系服务器软件 “服务器” 数据库 操作 mysql常用数据类型:int varchar float double bit datetime. ...

  4. [07] ServletContext上下文对象

    1.上下文的概念 我们在说到Servlet的继承关系时,提到自定义Servlet实际上间接实现了Servlet和ServletConfig两个接口,其中ServletConfig接口中定义了一个方法叫 ...

  5. Elasticsearch 的分页报错 result window is too large

    检查自己分页查询的代码 Pageable pageable = new PageRequest(0, 10000); searchQuery.setPageable(pageable); // 分页效 ...

  6. 嵌入式Llinux学习路线图

    版本 日期 作者 说明 V1 2016.07.29 韦东山 第1版本,Android部分未写 我是1999年上的大学,物理专业.在大一时,我们班里普遍弥漫着对未来的不安,不知道学习了物理后出去能做什么 ...

  7. 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\ ...

  8. EGit使用教程:第一篇 添加工程到版本控制

    配置 确定身份 当每次提交的时候,Git需要跟踪这次提交,确认是哪个用户提交的.用户由 user.name 和 user.email 组成,这个信息包含在 ~/.gitconfig 文件中. ~ 代表 ...

  9. java中判断字符串是否为数字的方法的几种方法

    1.用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = 0; i < str.length(); i++){ ...

  10. S2_OOP第三章

    第一章 多态 概念 多态是具有表现多种型生态的能力的特征,同一个实现接口,使用不同的实例而执行不同的操作 子类转换父类(向上转型) 用父类接受子类,向上转型 向上转型的规则: 讲一个父类的引用志向一个 ...