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 ...
随机推荐
- JVM（一）
1 Java类加载器包括几种?它们之间的关系是怎么样的?双亲委派机制是什么意思?有什么好处? 启动Bootstrap类加载.扩展Extension类加载.系统System类加载. 类加载器也是Java ...
- node项目配置成nginx启动
node项目配置成nginx启动 1.新建ant.conf upstream antNodeJs{ server 127.0.0.1:8000; keepalive 64; } server { li ...
- Centos7默认自带了Python2.7版本,但是因为项目需要使用Python3.x，这里提供一种比较快捷方便的安装方式
安装必要工具 yum-utils: $ sudo yum install yum-utils 使用yum-builddep为Python3构建环境,安装缺失的软件依赖,使用下面的命令会自动处理.$ s ...
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- 从flask视角理解angular（三）ORM VS Service
把获取模型数据的任务重构为一个单独的服务,它将提供英雄数据,并把服务在所有需要英雄数据的组件间共享. @Injectable() export class HeroService { getHeroe ...
- 当启动tomcat时出现tomcat setting should be set in tomcat preference page
转自:https://blog.csdn.net/withyou_wy/article/details/53081800 出现此状况证明你的tomcat在配置的时候没有配置成功,通过以下两个步骤即可以 ...
- Asp.net core 学习笔记 ( upload/download files 文件上传与下载 )
更新 : 2018-01-22 之前漏掉了一个 image 优化, 就是 progressive jpg refer : http://techslides.com/demos/progressi ...
- caffe在solverstate的基础上继续训练模型
以mnist数据集为例: bat训练脚本: Build\x64\Release\caffe.exe train --solver=examples/mnist/lenet_solver.prototx ...
- Confluence 6 如何考虑设置一个空间的主页
这空间是干什么的?空间主页是访问你空间的用户最先看到的页面.如果你在这个页面中包含一些你空间是干什么的内容能够帮助你的用户更加容易的访问你的空间,同时也能够让你的用户更加容易了解你正在工作的事情.你可 ...
- PHP单例模式实例,连接数据库对类的引用
<?php//单例模式连接数据库class pzhang{ static private $instance; private static $config; private $dbase = ...