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 ...
随机推荐
- Django2.2安装
Django2.2安装 https://media.djangoproject.com/releases/2.2/Django-2.2.tar.gz 解压 tar -zvxf Django-2.2.t ...
- C++ Web 编程
C++ Web 编程 什么是 CGI? 公共网关接口(CGI),是一套标准,定义了信息是如何在 Web 服务器和客户端脚本之间进行交换的. CGI 规范目前是由 NCSA 维护的,NCSA 定义 CG ...
- Exception in thread "main" java.util.regex.PatternSyntaxException: Unclosed character class near index 0 解决方法: 要对切割字符进行转义\\
使用str.split("[",15)时,出现Exception in thread "main" java.util.regex.PatternSyntaxE ...
- 力扣（LeetCode）415. 字符串相加
给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和. 注意: num1 和num2 的长度都小于 5100. num1 和num2 都只包含数字 0-9. num1 和num2 都不包 ...
- python第二章（2）列表
names=["zhangyang","guyun","xiangpeng","leiming","xulia ...
- android 趟坑记
又是一个伤感的故事,但阿古好像已经习以为常了. 大半年的辛苦又泡汤了,故事是这样. 帝都某高端小区,封闭局域网,做一个可视对讲+门禁的APP,之前那一版因为使用了商业代码,又不想花钱,于是找阿古换一个 ...
- HeadFirst Ruby 第十五章总结 Saving and loading data
前言 在上一章讲述了如何进行基础的操作,比如 处理 GET 请求的 get route, 再比如下载 gem 等等方面的知识.在这一章节,作者告诉我们如何储存.处理数据.整个过程分三步走: 首先,当 ...
- HTML 第九章总结
前言 这一章节主要讲了关于 HTML 中关于留白的知识:在这一章节中,从大到小,有: margin border padding context 这四个部分. 关于margin和padding mar ...
- 最大似然估计实例 | Fitting a Model by Maximum Likelihood (MLE)
参考:Fitting a Model by Maximum Likelihood 最大似然估计是用于估计模型参数的,首先我们必须选定一个模型,然后比对有给定的数据集,然后构建一个联合概率函数,因为给定 ...
- Tomcat ----> 学习笔记
源码之几个常见类和接口的关系 在学习Servlet的时候经常见到以下几个合成单词和非合成单词:Servlet.GenericServlet.HttpServlet.它们之间有联系的.接下来我把它们的联 ...