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

  1. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  2. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  3. Vue 父子组件间的通信

    前言 在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件,这 ...

  4. vue——父子组件间传值

    (1)父组件给子组件传值(商品详情页): 根据订单类型,判断显示立即购买/立即拼单: 通过props来传递参数 父组件(商品详情页) 父组件调用子组件,在子组件的标签中,通过:数据名称=”数据”的形式 ...

  5. Vue父子组件间的通信

    父组件通过 props 向下传递数据给子组件,子组件通过 events 向上给父组件发送消息. 父组件: <div> <div style="background:#344 ...

  6. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. Vue2.0父子组件间事件派发机制

    从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...

  8. Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)

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

  9. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

随机推荐

  1. python第六篇:Python复制超大文件、复制二进制文件

    Python文件复制 # 写程序实现复制文件的功能 # 要求: # 1. 源文件路径和目标文件路径需要手动输入 # 2. 要考虑文件关闭的问题 # 3. 要考虑复制超大文件的问题 # 4. 要能复制二 ...

  2. jQuery中的动画理论干货

    [jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法]1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在 ...

  3. C++STL 常用 函数 用法(转)

    http://www.cnblogs.com/duoduo369/archive/2012/04/12/2439118.html 迭代器(iterator) 个人理解就是把所有和迭代有关的东西给抽象出 ...

  4. json-lib简单处理json和对json的简单介绍

    JSON 1.json是什么? *它是js提供的一种数据交换格式 2.json的语法 *{}:是对象! >属性名必须使用双引号括起来!单引号不行!!! >属性值: *null *数值 *数 ...

  5. 了解fiddler:实现简单的抓包测试

    fiddler是一款轻型的抓包软件 本文介绍几个常用的功能:(相信图片更直观点,上图片,右键在新标签页中打开,查看高清大图) 通过composer,我们可以修改http头部信息,修改post(),ge ...

  6. Gym - 100513K :Treeland (按距离还原一棵树)

    题意:一个顶点数为N的生成树,对于每个点i,我们按照与i的距离给出顺序,即dis i 1<=dis i 2<=dis i 3<=...,现在让你输出N-1条边,即还原这棵树. 思路: ...

  7. BZOJ5362: [Lydsy1805月赛]quailty 算法

    BZOJ5362: [Lydsy1805月赛]quailty 算法 https://lydsy.com/JudgeOnline/problem.php?id=5362 分析: 题意即求一个最小基环树森 ...

  8. vue-router路由嵌套的使用

    vue-router路由嵌套的使用,以及子路由中设置默认路由: 项目结构: 在/src/App.vue文件中: <template> <div id="app"& ...

  9. iOS获取设备型号的方法

    1. [UIDevice currentDevice].model   自己写的看只抓到模拟器和iPhone.暂时不推荐. 2.自己写的找的方法再添加.直接  NSString * deviceMod ...

  10. linux python 更新版本

    更新python: 第1步:更新gcc,因为gcc版本太老会导致新版本python包编译不成功 代码如下: #yum -y install gcc 系统会自动下载并安装或更新,等它自己结束 第2步:下 ...