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="$ ...
随机推荐
- Hackrank Equal DP
Christy is interning at HackerRank. One day she has to distribute some chocolates to her colleagues. ...
- 可用内存free不足 hadoop3 无法启动 手动释放缓存 cache
[root@hadoop3 hadoop]# xlfg total used free shared buff/cache availableMem: 15 0 2 0 12 14Swap: 7 0 ...
- vue学习1
1.<div id="app">{{message}}<input v-model="message"></div>new ...
- bzoj3612: [Heoi2014]平衡
首先不可重的整数规划是fi,j=fi-1,j-i+fi,j-i的 然后现在加了一个限制,分成的数不能超过n,那么对于拼大于n的数的时候多减一个fi-1,j-n-1 接下来是优化代码暴露我自带巨大常数的 ...
- BZOJ_3620_似乎在梦中见过的样子_KMP
BZOJ_3620_似乎在梦中见过的样子_KMP Description “Madoka,不要相信 QB!”伴随着 Homura 的失望地喊叫,Madoka 与 QB 签订了契约. 这是 Modoka ...
- 【SCOI 2005】 扫雷
[题目链接] 点击打开链接 [算法] 只要第一行第一个数确定了,后面的数也都确定了 递推两遍即可 [代码] #include<bits/stdc++.h> using namespace ...
- AutoIT: 下载文件函数
Func down() $Size=InetGetSize($a[$j][]);获得FTP上的文件的大小 InetGet($a[$j][],$a[$j][],,);下载 ProgressOn(],), ...
- 洛谷 P1071 潜伏者 —— 模拟
题目:https://www.luogu.org/problemnew/show/P1071 按题意模拟即可. 代码如下: #include<iostream> #include<c ...
- C++实现用两个栈实现队列
/* * 用两个栈实现队列.cpp * * Created on: 2018年4月7日 * Author: soyo */ #include<iostream> #include<s ...
- 反编译Android的apk包得到源码（使用工具：dex2jar和jd-gui）
1. 先从 http://download.csdn.net/detail/dingyuming1991/9618125 下载反编译工具dex2jar和jd-gui(当然也可以google搜索下载): ...