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 ...
随机推荐
- 斜率DP hdu 3507
Problem Description Zero has an old printer that doesn't work well sometimes. As it is antique, he s ...
- 【实验吧】逆向rev50
a simple reverse view 解题链接: http://ctf5.shiyanbar.com/reverse/rev50/rev50 看了别人写的wp得知是挂载参数执行. 补充:gdb挂 ...
- DOM树节点和事件
一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点 DOM节点分为三大类: 元素节点,属性节点,文本节点 ...
- Bash脚本编写初体验
上周例会的时候,冷不丁的接到了维护原有的安装脚本和编写升级.卸载脚本的任务,PM和几个同事一本正经的说,一天甚至30分钟就可以精通shell脚本编写,哪怕没有语言基础也可以. 当然,作为有着C++.P ...
- spring mvc:ueditor跨域多图片上传失败解决方案
公司在开发一个后台系统时需要使用百度的UEditor富文本编辑器,应用的场景如下: UEditor的所有图片.js等静态资源在一个专有的静态服务器上: 图片上传在另外一台服务器上: 因为公司内部会使用 ...
- [C]字符串排序之-冒泡法
在oj刷题,遇见一题字符串排序题. 脑海里瞬间闪过数组排序. 思路有了,打开题解看看别人的思路,发现好多人的排序方法显得比较臃肿,可能也是我的水平不够,欣赏不来吧. 不过用冒泡法排序的时候一定要记得字 ...
- java 8 总结 之lambda
lambda表达式 目的:行为参数化 Lambda表达式是简洁地表示可传递的匿名函数的一种方式:它没有名称,但它有参数列表.函数主体.返回类型,可能还有一个可以抛出的异常列表. Lambda的基本语法 ...
- spring整合mybatis错误:Could not autowire field: com.kjczwl.ssm.service.ItemsService com.kjczwl.ssm.controller.ItemsController.itemsservice;
运行环境:jdk1.7.0_17+tomcat 7 + spring:3.2.0 +mybatis:3.2.7+ eclipse 错误:Could not autowire field: com.kj ...
- 裸机LCD驱动配置
横屏4.3寸LCD为480*272(行:480个像素点 列:272个行) 1.1 LCD原理图 : Pin1:Von 电源正(这里由硬件自动控制) Pin2:VM/VDEN 数据使能 ...
- javascript中=,==,与===的区别;以及特殊值NaN的讲解
1.在js中"="是作为赋值.var a; a=3:给a赋值为3. 2."=="称作相等,"==="被称作严格相等.当使用"== ...