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

 

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

    第一周学习总结: 这周开始学习了Java,因为之前C语言没学好所以看部分东西还是一头雾水,但是在查阅资料和同学的帮助开始对Java有了一些了解,这周主要学习了Java的诞生发展以及运用包括JVN/JR ...

  2. Java课程设计——计算器团队博客

    1.团队名称.团队成员介绍(需要有照片) 1.1团队名称 707 1.2团队成员介绍 谢元将:组长 罗登宇:组员 王华俊:组员 2. 项目git地址 谢元将 罗登宇 王华俊 3. 项目git提交记录截 ...

  3. 201521123122 《java程序设计》第十二周学习总结

    ## 201521123122 <java程序设计>第十二周实验总结 ## 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将St ...

  4. 201521123001《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  5. PHP封装数据库连接

    将数据库连接放在类里面,用的时候直接实例化类. 将数据库地址,用户名,密码做成成员变量 将数据库连接做成成员方法,通过传入的sql语句返回结果集对象 class DBDA{ public $host= ...

  6. 工厂模式 and 单例模式

    工厂模式:使用工厂类使创建类与使用类分离,从而提高代码的易维护性,可扩展性等 工厂模式分位简单工厂模式和工厂方法模式 使用简单工厂模式的步骤:     1.创建父类及其子类         父类中有[ ...

  7. Eclipse dynamic web project 插件

    下载了Eclipse Oxygen   发现没有Dynamic web  Project 首先我们先了解下Dynamic  Web Project  If you want to create a c ...

  8. JS表单对象和图片对象--JavaScript基础

    1.表单对象 1)访问者输入正确的密码才可进入网站 HTML DOM prompt() 方法,prompt() 方法用于显示可提示用户进行输入的对话框.prompt(text,defaultText) ...

  9. [转载]iOS开发之手势识别

    感觉有必要把iOS开发中的手势识别做一个小小的总结.在上一篇iOS开发之自定义表情键盘(组件封装与自动布局)博客中用到了一个轻击手势,就是在轻击TextView时从表情键盘回到系统键盘,在TextVi ...

  10. 西邮linux兴趣小组2014纳新免试题(四)

    [第四关] 题目 http://findakey.sinaapp.com/ Example: String1:FFFF8 5080D D0807 9CBFC E4A04 24BC6 6C840 49B ...