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

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

子组件:

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. Markdown 简单指北

    Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Markdown 简介 Markdown是一种 ...

  2. Android笔记: ViewPager基本用法

    ViewPager控件可以实现多个View(或fragment)滑动切换的效果,属于比较常用的控件.下面用一个简单的例子介绍一下该控件的基本用法. 首先是布局文件activity_view_pager ...

  3. C# 使用NPOI 实现Excel的简单导入导出

    private void btnImport_Click(object sender, EventArgs e) { DataSet ds = new DataSet(); DataTable dt ...

  4. 关于i++和++i

    初学Java,经常看到i++和++i的一些问题,在此整理一下. 首先看下面一个小程序: public class atest{ public static void main(String args[ ...

  5. el-input监听不了回车事件

    vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-inp ...

  6. redis info 命令详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt119 Redis Info 命令以一种易于理解和阅读的格式,返回关于 Red ...

  7. RMI,RPC,SOAP对比分析

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp60   1.RMI     使用java的程序员,对于RMI(Remot ...

  8. 二:搭建一个webpack3.5.5项目:建立项目的webpack配置文件

    第一步: npm init -y [初始文件] npm info webpack / bower info webpack[查看版本,用bower的时候要先 npm install bower] np ...

  9. React——from

    在React中HTML的from元素与其他的DOM元素有些不同.因为表单元素自然而然的会有一些内部状态 一.controlled components 在HTML中,像input,select,tex ...

  10. mysql初学,mysql修改,mysql查找,mysql删除,mysql基本命令

    Mysql 下载地址https://dev.mysql.com/downloads/mysql/ 1.连接Mysql格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYS ...