方法一:子组件监听父组件发送的方法

方法二:父组件调用子组件方法

子组件:

export default {
mounted: function () {
this.$nextTick(function () {
this.$on('childMethod', function () {
console.log('监听成功')
})
})
},
methods {
callMethod () {
console.log('调用成功')
}
}
}

父组件:

<child ref="child" @click="click"></child>

export default {
methods: {
click () {
this.$refs.child.$emit('childMethod') // 方法1
this.$refs.child.callMethod() // 方法2
},
components: {
child: child
}
}
												

vue 父组件向子组件传递事件/调用事件的更多相关文章

  1. vue父页面给子页面传递数据

    父页面: <template> <div>{{msg}} <Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' : ...

  2. Vue父组件与子组件传递事件/调用事件

    1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...

  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父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  6. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  7. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  8. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

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

  9. vue父组件与子组件之间的数据传递

    父组件向子组件传递数据 父组件用数据绑定:子组件用props接收 <!-- test-vue-model父组件 --> <template> <div> <m ...

随机推荐

  1. 移动端touch事件 || 上拉加载更多

    前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...

  2. Struts2流程分析与工具配置

    1. 运行流程 请求 -- StrutsPrepareAndExecuteFilter 核心控制器 -– Interceptors 拦截器(实现代码功能 ) -– Action 的execuute - ...

  3. Java面试准备之集合框架

    集合框架 Collection:List列表,Set集 Map:Hashtable,HashMap,TreeMap Collection 是单列集合 List 元素是有序的(元素存取是有序).可重复 ...

  4. appium的webdriver执行swipe

    # convenience method added to Appium (NOT Selenium 3) def swipe(self, start_x, start_y, end_x, end_y ...

  5. Serializable序列化的作用

    这里转载一篇讲解java序列化(Serializable)和反序列化方面的感觉很好的文章.1.序列化是干什么的?简单说就是为了保存在内存中的各种对象的状态(也就是实例变量,不是方法),并且可以把保存的 ...

  6. 01-TypeScript概述

    本篇文章向大家介绍新的TypeScript客户端脚本语言,主要涉及两个方面,一是传统JavaScript语言的弱点,二是TypeScript语言的优势. 一.JavaScript的弱点 1.弱类型,缺 ...

  7. shell脚本进阶之循环判断

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; f ...

  8. SNS团队第二次站立会议(2017.04.23)

    一.当天站立式会议照片 本次会议主要内容:汇报工作进度,根据完成情况调整进度 二.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 梳理清楚数据的每个类型和数据项  具体落实把相关数据 ...

  9. 团队作业8——第二次项目冲刺(Beta阶段)--5.21 second day

    团队作业8--第二次项目冲刺(Beta阶段)--5.21 second day Day two: 会议照片 项目进展 今天是beta冲刺的第二天,组长还在准备考试当中,我们继续做前端改进和后端安排,今 ...

  10. 201521123091 《Java程序设计》第11周学习总结

    Java 第十一周总结 第十一周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 4.课后阅读 1.本章学习总结 1.1 以你喜欢的方式(思维导图 ...