vue 父组件向子组件传递事件/调用事件
方法一:子组件监听父组件发送的方法
方法二:父组件调用子组件方法
子组件:
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 父组件向子组件传递事件/调用事件的更多相关文章
- vue父页面给子页面传递数据
父页面: <template> <div>{{msg}} <Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' : ...
- Vue父组件与子组件传递事件/调用事件
1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...
- 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父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- 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父组件与子组件之间的数据传递
父组件向子组件传递数据 父组件用数据绑定:子组件用props接收 <!-- test-vue-model父组件 --> <template> <div> <m ...
随机推荐
- Java入门(5)——类和对象还有构造方法
类 类和对象的概念: 类是对一群具有相同属性.行为的事物的统称. 类是抽象的. 人以类聚 物以群分 对象: 对象是现实生活中的1个具体存在. 看得 ...
- poj 2763 Housewife Wind (树链剖分)
题目链接:http://poj.org/problem?id=2763 题意: 给定一棵含n个结点的树和树的边权,共有q次操作,分为两种 0 c :求从位置s到c的距离,然后s变成c 1 a b:把第 ...
- poj2051 Argus
Description A data stream is a real-time, continuous, ordered sequence of items. Some examples inclu ...
- SpringMVC简单入门
SpringMVC简单入门 与大家分享一下最近对SpringMVC的学习,希望本文章能对大家有所帮助. 首先什么是SpringMVC? Spring 为展现层提供的基于MVC设计理念的优秀的Web框架 ...
- 数据结构之B进制(确定进制)
#include <cstdio> int max_num(int n) { int max=0; while(n) { int k=n%10; if(k>max) max=k; n ...
- jmeter返回的post data乱码
通过csv 跑出来的结果 解决方法: 在CSV Data Set Config中将File Encoding设置为GB2312将Allow quoted data 设置为true
- 八大排序算法---基于python
本文节选自:http://python.jobbole.com/82270/ 本文用Python实现了插入排序.希尔排序.冒泡排序.快速排序.直接选择排序.堆排序.归并排序.基数排序. 1.插入排序 ...
- tomcat配置不用访问工程名
<Host name="localhost" appBase="/server/webapps" unpackWARs="true" ...
- 3_SQL Server通过代码的方式添加数据
--通过代码添加数据 --第一种方式--insert into 表名(列名1,列名2,...)values (值1,值2,...)insert into Department(DepName, Dep ...
- [转载]dreamweaver代码提示失效
原文地址:dreamweaver代码提示失效作者:云中雁 2007-03-23 12:19:22| 分类: 编程手记 | 标签:web2.0 javascript |字号大中小 订阅 吴庆民 ...