vue.js中$emit的理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去则使用自定义事件!-->
<div id="app">
<p>{{total}}</p>
<button-counter v-on:increment='incrementTotal'></button-counter>
<button-counter @increment='incrementTotal'></button-counter>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
Vue.component('button-counter',{
template:'<button v-on:click="increment">{{counter}}</button>',
data:function(){
return {
counter:0
}
},
methods:{
increment:function(){
this.counter +=1;
//$emit(‘increment1‘,[12,‘kkk‘]),直接看是懵逼的有没有,可以先告诉你,就是触发自定义事件increment1(或者函数名吧),[]为参数
this.$emit('increment')
}
}
})
var app = new Vue({
el:'#app',
data:{
total:0
},
methods:{
incrementTotal:function(){
this.total += 1;
}
}
})
</script>
</html>
最新文章
- Spring Trasnaction管理(3)- 事务嵌套
- (六)Ireport制作一个规范的报表,处理数据格式
- ffmpeg关于aac解码
- RSA算法详解及C语言实现
- Maximum Product Subarray——LeetCode
- 下拉列表框Combo Box
- 转:Javascript的10个设计缺陷
- WebStorm开发Nodejs环境搭建,包括破解最新的WebStom11破解
- [ABP开源项目]--vue+vuex+vue-router+EF的权限管理系统
- UVA-10714 Ants---蚂蚁模拟
- pandas的读写
- H5采集pcm流转换采样率实时发送到服务端
- web.xml配置web中的key points(下)
- 剪格子 dfs 蓝桥杯
- linux中断源码分析 - 中断发生(三)
- ubuntu jdk 安装
- Hyperledger超级账本在Centos7下搭建运行环境
- List 集合的交集
- EGL 1.0 学习笔记
- mysql 事务隔离级别详解
热门文章
- Docker 三剑客 到 k8s 介绍
- Codeforces Round #683 (Div. 2, by Meet IT)
- 【测试技术分享】在Linux下安装Python3
- E - Recursive sequence HDU - 5950 (矩阵快速幂)
- MySQL Order BY 排序过程
- UML第二部分和创建型模式
- 在Ubuntu上安装TensorFlow-GPU开发环境
- 【Spring Cloud &; Alibaba全栈开源项目实战】:SpringBoot整合ELK实现分布式登录日志收集和统计
- 通俗易懂,android是如何管理内存的
- java例题_16 九九乘法表