我们知道父组件是使用props传递数据给子组件,如果子组件要把数据传递回去,怎么办? 那就是要自定义事件!使用v-on绑定自定义事件 每个Vue实例都实现了事件接口(Events interface), 即 使用$on(eventName) 监听事件 $emit(eventName) 触发事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
<!--<script src="../vue2.1.6.js"></script>-->
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body><div id="app">
<table>
<tr>
<th colspan="3">父组件数据</th>
</tr>
<tr>
<td>名字</td>
<td>{{name}}</td>
<td><input type="text" v-model="name" /></td>
</tr>
<tr>
<td>年龄</td>
<td>{{age}}</td>
<td><input type="text" v-model="age" /></td>
</tr> </table>
<my-component :my-name="name" :my-age="age" @change-name="setName" @change-age="setAge"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="3">子组件数据</th>
</tr>
<tr>
<td>名字</td>
<td>{{myName}}</td>
<td><input type="text" v-model="myName" /></td>
</tr>
<tr>
<td>年龄</td>
<td>{{myAge}}</td>
<td><input type="text" v-model="myAge" /></td>
</tr>
</table>
</template>
<script>
var vm = new Vue({
el: "#app",
data: {
name: "小明",
age: 24
},
components: {
'my-component': {
template: "#myComponent",
props: ["myName", "myAge"],
watch: { //监听外部对props属性myName,myAge的变更
myName: function(val) {
this.$emit("change-name", val) //组件内对myName变更后向外部发送事件通知
},
myAge: function(val) {
this.$emit("change-age", val) //组件内对myAge变更后向外部发送事件通知
}
}
}
},
methods: {
setName: function(val) {
this.name = val; //外层调用组件方法注册变更方法,将组件内的数据变更,同步到组件外的数据状态中
},
setAge: function(val) {
this.age = val;
}
}
})
</script>
</body> </html>

vue2.0自定义事件的更多相关文章

  1. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  2. vue2.0自定义指令

    前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...

  3. vue2.0 之事件处理器

    事件绑定v-on(内置事件) <template> <div> <a v-if="isPartA">partA</a> <a ...

  4. cocos2d 3.0自定义事件答疑解惑

    疑惑一:在事件分发中修改订阅者 ,对于这个的理解. 事件的分发是可以嵌套的,cocos2dx使用_inDispatch来保存当前嵌套的深度,当调用第一个dispatchEvent的时候,_inDisp ...

  5. vue2.0自定义指令的使用方法

    感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...

  6. vue2.0 自定义过滤器

    2.0中已经废弃了过滤器,需要我们自定义 <div id="app"> {{message|uppercase}} </div> //过滤器 Vue.fil ...

  7. vue2.0 自定义指令

    Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1 ...

  8. vue2.0 自定义 提示框(Toast)组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  9. vue2.0 自定义 折叠列表(Accordion)组件

    1.自定义  折叠列表 Accordion.vue (1)sass  版本 <!-- 折叠列表 组件 --> <template> <nav :class="$ ...

随机推荐

  1. mongo13----application set与分片结合

    replation set配合分片 打开3台服务器,B服务器()放configserv, C,D服务器(203.204)放置复制集 .203和192.168.1.204分别运行之前的sh start. ...

  2. YTU 2980: 几点了

    2980: 几点了 时间限制: 1 Sec  内存限制: 128 MB 提交: 37  解决: 9 题目描述 现有一个Time类可以用来记录时间,请输出Time记录的时间加上s秒后的时间. 只需提交补 ...

  3. Hibernate、Spring和Struts2工作原理

    Hibernate.Spring和Struts2工作原理 博客分类: Java 基础 工作HibernateSpringMVCStruts  Hibernate.Spring和Struts2工作原理  ...

  4. zip压缩文件测试

    http://tech.it168.com/a2009/0604/583/000000583382_5.shtml ];                MessageBox.Show(string.F ...

  5. jenkins配置发送邮件时,日志中显示发送成功,但是邮箱没有收到邮件

    遇到这种问题,是因为安装的Email Extension Plugin插件版本与jenkins不兼容, 经试验2.39.3版本可以正常发送邮件,在jenkins主目录中 将2.39.3的文件和文件夹复 ...

  6. [转]如何用git将项目代码上传到github

    注册账户以及创建仓库 要想使用github第一步当然是注册github账号了.之后就可以创建仓库了(免费用户只能建公共仓库),Create a New Repository,填好名称后Create,之 ...

  7. UI:sqlite数据库

    使用sqllite的时候一些笔记 数据库(管理类),在工程 general 导入 动态链接库 libsqllite3.0.dylib  在.h文件里引入导入 sqllite3.h 头文件 在.h里面声 ...

  8. Spring--quartz中cronExpression配置说明

    Spring--quartz中cronExpression Java代码   字段      允许值         允许的特殊字符 秒       0-59        , - * / 分     ...

  9. hdu4975 A simple Gaussian elimination problem.(最大流+判环)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4975 题意:和hdu4888基本一样( http://www.cnblogs.com/a-clown/ ...

  10. E20180225-hm-xa

    variation  n. 变化,变动; 变异,演变; 变奏曲; 变量; auxiliary adj. 辅助的 subscript  adj. 下标的,写在下方的,脚注的;  n. 下标,脚注,下角数 ...