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 ...
随机推荐
- 201521123008《Java程序设计》第1周学习总结
本周学习总结 了解了JAVA:jdk:jre:jvm等 C语音与JAVA的部分区别: C语言全面向过程,java面向对象: C语言的代码不能跨平台,java的代码可以跨平台: C语言有指针,java没 ...
- 201521123013 《Java程序设计》第11周学习总结
1. 本章学习总结 2. 书面作业 Q1.1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥 ...
- JAVA课程设计猜数游戏 个人
1.团队课程设计博客链接 https://i.cnblogs.com/EditPosts.aspx?postid=7067843&update=1 2.个人负责模块说明 输入用户ID 2.主要 ...
- Struts访问的时候出现request=null的情况
今天用Struts框架写个小应用的时候,出现了如下问题 private File upload; private String uploadContentType; private Str ...
- MyBatis学习(六)MyBatis关联映射之一对多映射
数据库中一对多通常使用主外键关联,外键应该在多方,即多方维护关系. 下面举一个简单实例来看看MyBatis怎么处理一对多的关系. 1.创建一个项目,导入所需jar包,导入db.properties配置 ...
- servlet_2
package com.atguigu.servlet; import java.io.IOException; import javax.servlet.Servlet;import javax.s ...
- Go语言基础知识
Go语言的一般结构:basic_structure.go Go程序是通过package来组织的,只能同过package名称为main的包可以包含main函数(一个可执行程序只能有一个main包) 通过 ...
- Servlet学习应该注意的几点
一.Servlet生命周期(即运行过程) (1)初始阶段,调用init()方法 (2)响应客户请求阶段,调用service()方法.由service()方法根据提交方式不同执行doGet()或doPo ...
- iOS Storyboard约束详解
链接:http://www.jianshu.com/p/b88c65ffc3eb 约束,就是指--此处略去1万字--都懂的,就不说了.直接进入实战环节. 本文的控件约束都是围绕着UITableView ...
- Writing Science 7.10 (The Opening and The Funnel)
Opening: 1.文章的第一句话必须要达到如下目标:找出推动研究的问题,介绍内容,并确定本文针对的观众.如果你足够聪明的话甚至可以将遇到的挑战以及结论写进来. 2.通过第一段话建立本文的重点和基调 ...