vue2.0自定义事件
我们知道父组件是使用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自定义事件的更多相关文章
- CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法
因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...
- vue2.0自定义指令
前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...
- vue2.0 之事件处理器
事件绑定v-on(内置事件) <template> <div> <a v-if="isPartA">partA</a> <a ...
- cocos2d 3.0自定义事件答疑解惑
疑惑一:在事件分发中修改订阅者 ,对于这个的理解. 事件的分发是可以嵌套的,cocos2dx使用_inDispatch来保存当前嵌套的深度,当调用第一个dispatchEvent的时候,_inDisp ...
- vue2.0自定义指令的使用方法
感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...
- vue2.0 自定义过滤器
2.0中已经废弃了过滤器,需要我们自定义 <div id="app"> {{message|uppercase}} </div> //过滤器 Vue.fil ...
- vue2.0 自定义指令
Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1 ...
- vue2.0 自定义 提示框(Toast)组件
1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...
- vue2.0 自定义 折叠列表(Accordion)组件
1.自定义 折叠列表 Accordion.vue (1)sass 版本 <!-- 折叠列表 组件 --> <template> <nav :class="$ ...
随机推荐
- 程序员的vim
1,所有的Unix like系统都会内建vi文书编辑器,其他的文书编辑器则不一定会存在,但是目前我们使用比较多的是vim编辑器 vim具有程序编辑的能力,可以主动的以字体颜色辨别语法的正确性,方便程序 ...
- ubuntu切换中英文通用方法,ubuntu中文语言
1:点击桌面右上角的齿轮,选择“system settings”进入系统设置界面
- Linux设备驱动--块设备(三)之程序设计
块设备驱动注册与注销 块设备驱动中的第1个工作通常是注册它们自己到内核,完成这个任务的函数是 register_blkdev(),其原型为:int register_blkdev(unsigned i ...
- Avoiding memory leaks
Android applications are, at least on the T-Mobile G1, limited to 16 MB of heap. It's both a lot of ...
- Rust语言——无虚拟机、无垃圾收集器、无运行时、无空指针/野指针/内存越界/缓冲区溢出/段错误、无数据竞争
2006年,编程语言工程师Graydon Hoare利用业余时间启动了Rust语言项目.该项目充分借鉴了C/C++/Java/Python等语言的经验,试图在保持良好性能的同时,克服以往编程语言所存在 ...
- I.MX6 Android stlport 使用
/****************************************************************** * I.MX6 Android stlport 使用 * 说明: ...
- bzoj3626 [LNOI2014]LCA——树链剖分
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3626 思路很巧妙,把区间换成前缀和相减: 把 l ~ r 到根路径上的点的点权都+1,然后 ...
- 【基于libRTMP的流媒体直播之 AAC、H264 推送】
这段时间在捣腾基于 RTMP 协议的流媒体直播框架,其间参考了众多博主的文章,剩下一些细节问题自行琢磨也算摸索出个门道,现将自己认为比较恼人的 AAC 音频帧的推送和解析.H264 码流的推送和解析以 ...
- python中coding:utf-8和setdefaultencoding区别
这两个作用不一样, 1. # coding:utf-8 作用是定义源代码的编码. 如果没有定义, 此源码中是不可以包含中文字符串的.PEP 0263 -- Defining Python Source ...
- ExtJS 4 MVC 创建 Viewport
http://ext4all.com/post/extjs-4-mvc-with-viewport 效果图: 结构图: 没有用到Model层,直接在view里面写上 默认的 json的数据 中间Pan ...