vue2.x 父组件监听子组件事件并传回信息
利用vm.$emit
1、在父组件中引用子组件
<child @from-child-msg="listenChildMsg"></child >
2、子组件中使用$emit发送事件
this.$emit('from-child-msg', '这是子组件传递的消息');
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
input, select {
height: 30px;
}
</style>
</head>
<body>
<div id="app">
<child value="name" @msg-from-child="getMsgFromChild"></child>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script>
Vue.component('child', {
data: function () {
return {
val: this.value
}
},
props: ['value'],
methods: {
handleClick () {
this.$emit('msg-from-child', this.val)
}
},
template: `
<div><input type="text" v-model="val"><button type="button" @click="handleClick">确定</button></div>
`
})
new Vue ({
el: '#app',
data: { },
methods: {
getMsgFromChild (v) {
alert('msg: ' + v)
}
}
})
</script>
</body>
</html>
vue2.x 父组件监听子组件事件并传回信息的更多相关文章
- 【Angular】父组件监听子组件事件(传参)
Angular官方文档Demo地址:>component-interaction#parent-listens-for-child-event 举一个自己在写的项目
- vue中父组件如何监听子组件值的变化
vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组 ...
- vue watch 可以监听子组件props里面属性的改变
子组件watch 可以监听其props里面属性的改变 当changeFather导致calm改变时,会执行console.log('props change');
- vue 监听子组件事件及组件上使用v-model
- js监听页面copy事件添加版权信息
个人博客 地址:http://www.wenhaofan.com/article/20180921103346 1.介绍 当页面需要做版权保护时,比如当用户copy我们网站的文章时,我们会希望在他co ...
- Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
随机推荐
- pl/sql编译存储过程卡住的解决方法
oracle编译存过卡住处理: 问题描述: 在编译某个存过时,由于没提交或断网或者test没停止又重新编译,导致编译存过一直卡死 问题分析: 存过或某张表被锁 问题处理: 1.查看存过是否锁住,loc ...
- es6 export 和export default的区别
区别 export 每个文件中可使用多次export命令 import时需要知道所加载的变量名或函数名 import时需要使用{},或者整体加载方法 export export default 每个文 ...
- 牛客国庆集训派对Day3 I Metropolis
Metropolis 思路: 多源点最短路 只要两个不同源点的最短路相遇,我们就更新两个源点的答案 代码: #pragma GCC optimize(2) #pragma GCC optimize(3 ...
- Python PyQt5 Pycharm 环境搭建及配置
PyQt5相关安装 python 版本 python 3.6.3 1.安装PyQt5 执行命令: pip install pyqt5 2.安装PyQt5-tools 执行命令:pip install ...
- Asp.net core 学习笔记 ( DI 依赖注入 )
比起 Angular 的依赖注入, core 的相对简单许多, 容易明白 所有 provider 都在 startup 里配置. public void ConfigureServices(IServ ...
- c# 读取txt方法
string strLine; try { FileStream aFile = new FileStream("Log.txt", FileMode.Open); StreamR ...
- HG255D 刷机备忘
<该死的系统,就是不重启.这文章也没意义了> 1.前期固件准备:①软件:XXXXX.bin②openwrt固件:XXXX.bin(我用的是shcl版的,感觉还不错,你也可以刷其他版本的) ...
- The MySQL Server
mysqld is the MySQL server. configuring the server. The mysql server, mysqld,has many command option ...
- 比对软件之STAR的使用方法
建索引 普通比对 二次比对 用于cufflinks和stringtie的比对 待续~ 参考:比对软件STAR的简单使用
- 统计数组中各个元素出现的次数，元素取值范围为：1到N
问题描述: * 给定一个整数数组a,长度为N,元素取值范围为[1,N]. * 统计各个元素出现的次数,要求时间复杂度为O(N),空间复杂度为O(1). * 可以改变原来数组结构. 思路: * 从第 ...