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

 

<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. 201521123073 《Java程序设计》第5周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 1.2 ...

  2. 201521123111《Java程序设计》第4周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. Answer: - 上课还讲了tostring的使用,般toString用于返回表示对象值的 ...

  3. 201521123096《Java程序设计》第二周学习总结

    1.本周学习总结 (1)学会使用码云管理代码: (2)了解数组和字符串的操作: (3)对完全限定类名有一定的认识. 2.书面作业 (1)使用Eclipse关联jdk源代码,并查看String对象的源代 ...

  4. 201521123080《Java程序设计》第2周学习总结

    1.本周学习总结 a.学习了如何建立远程仓库和本地仓库并建立连接. b.学习了一些基础语法. 2.书面作业 Q1.使用Eclipse关联jdk源代码,并查看String对象的源代码(截图)?分析Str ...

  5. 201521123055《Java程序设计》第1周学习总结

     1. 本章学习总结 (1)JAVA环境配置(JDK,JVM) (2)编写简易程序熟练代码结构  2. 书面作业 1.为什么java程序可以跨平台运行?执行java程序的步骤是什么? JAVA程序需要 ...

  6. Java 第十四周总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 2. 使用JDBC连接数据库与Statement 2.1 使用Statement操作数据库.(粘贴一段你认为比较有价值的代码,出现学 ...

  7. JAVA课程设计-----加减法测试博客

    1.团队成员介绍(一个人做的) 谢季努:网络1513 201521123079 2.项目git地址 3.项目git提交截图 4.项目运行截图 输入答案后点击确认就会出现本次的得分 如果觉得成绩不理想点 ...

  8. 201521123070 《JAVA程序设计》第12周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  9. jsp+servlet对于单选按钮和复选框取值并且存放到数据库中

    index.jsp <form action="index.gj?method=toradio" method="post"> <div al ...

  10. Python 浅谈注释的重要性

    最近参加了一个比赛,然后看到队友编程的代码,我觉得真的是难以下咽,几乎每个字符都要咨询他,用老师的话来说,这就是山炮编程员,所以此时的我意识到写一篇关于注释程序的重要性了,因此特地的写一篇文章帮助大家 ...