vue -- 父子组件间的事件触发
1、父组件触发子组件事件
Parent.vue
<child ref="child"></child>
<div @click="fn">点击触发子组件中的事件</div>
methods:{
fn(){
this.$refs.child.clearTime(); //clearTime为子组件中的事件
}
}
子组件Child.vue中只需要定义被父组件触发的事件即可,无需其他处理。
2、子组件触发父组件事件
子组件通过$emit触发父组件的事件,$emit后面的参数是向父组件传参;
//Child.vue
this.$emit('time','adoctors');
//Parent.vue
<topic @time="getTime"></topic>
methods:{
getTime(val){
console.log(val) //'adoctors'
... // 其他的一些业务逻辑
}
}
vue -- 父子组件间的事件触发的更多相关文章
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- Vue 父子组件间的通信
前言 在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件,这 ...
- vue——父子组件间传值
(1)父组件给子组件传值(商品详情页): 根据订单类型,判断显示立即购买/立即拼单: 通过props来传递参数 父组件(商品详情页) 父组件调用子组件,在子组件的标签中,通过:数据名称=”数据”的形式 ...
- Vue父子组件间的通信
父组件通过 props 向下传递数据给子组件,子组件通过 events 向上给父组件发送消息. 父组件: <div> <div style="background:#344 ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Vue2.0父子组件间事件派发机制
从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
随机推荐
- python第六篇:Python复制超大文件、复制二进制文件
Python文件复制 # 写程序实现复制文件的功能 # 要求: # 1. 源文件路径和目标文件路径需要手动输入 # 2. 要考虑文件关闭的问题 # 3. 要考虑复制超大文件的问题 # 4. 要能复制二 ...
- jQuery中的动画理论干货
[jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法]1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在 ...
- C++STL 常用 函数 用法(转)
http://www.cnblogs.com/duoduo369/archive/2012/04/12/2439118.html 迭代器(iterator) 个人理解就是把所有和迭代有关的东西给抽象出 ...
- json-lib简单处理json和对json的简单介绍
JSON 1.json是什么? *它是js提供的一种数据交换格式 2.json的语法 *{}:是对象! >属性名必须使用双引号括起来!单引号不行!!! >属性值: *null *数值 *数 ...
- 了解fiddler:实现简单的抓包测试
fiddler是一款轻型的抓包软件 本文介绍几个常用的功能:(相信图片更直观点,上图片,右键在新标签页中打开,查看高清大图) 通过composer,我们可以修改http头部信息,修改post(),ge ...
- Gym - 100513K :Treeland (按距离还原一棵树)
题意:一个顶点数为N的生成树,对于每个点i,我们按照与i的距离给出顺序,即dis i 1<=dis i 2<=dis i 3<=...,现在让你输出N-1条边,即还原这棵树. 思路: ...
- BZOJ5362: [Lydsy1805月赛]quailty 算法
BZOJ5362: [Lydsy1805月赛]quailty 算法 https://lydsy.com/JudgeOnline/problem.php?id=5362 分析: 题意即求一个最小基环树森 ...
- vue-router路由嵌套的使用
vue-router路由嵌套的使用,以及子路由中设置默认路由: 项目结构: 在/src/App.vue文件中: <template> <div id="app"& ...
- iOS获取设备型号的方法
1. [UIDevice currentDevice].model 自己写的看只抓到模拟器和iPhone.暂时不推荐. 2.自己写的找的方法再添加.直接 NSString * deviceMod ...
- linux python 更新版本
更新python: 第1步:更新gcc,因为gcc版本太老会导致新版本python包编译不成功 代码如下: #yum -y install gcc 系统会自动下载并安装或更新,等它自己结束 第2步:下 ...