VueJS组件通过props自定义事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div> <script>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
</body>
</html>
效果如图：
VueJS组件通过props自定义事件的更多相关文章
- vue组件-子组件向父组件传递数据-自定义事件
自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!
- vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- Vue基础-自定义事件的表单输入组件、自定义组件的 v-model
Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...
- Vue学习笔记-组件通信-子传父（自定义事件）
props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中.我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成.什么时候需要自定义事件呢?当子组件需要向父组件传递 ...
- Vue3手册译稿 - 深入组件 - 自定义事件
本章节需要掌握组件基础 emit我译成发射,觉得发射这个词比较形象的形容将子组件事件发射出来的一个动作. 事件名 像组件和props,事件名也会进行自动转换,如果你在子组件里发射一个驼峰命名的事件,你 ...
- Vue 自定义事件 && 组件通信
1 App.vue 2 <template> 3 <!-- 4 组件的自定义事件: 5 1.一种组件间通信的方式,使用于:子组件===>父组件 6 2.使用场景:A是父组件,B ...
- Vue学习之--------组件自定义事件（绑定、解绑）（2022/8/21）
文章目录 1.基础知识 2.代码实例 2.1 App.vue 2.2 school.vue 2.3 student.vue 3.测试效果(略) 4.实际应用(在组件化编码实战三的基础上改进) 4.1 ...
- vue 父子组件通信props/emit
props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...
- Angular4.x Event (DOM事件和自定义事件)
Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)=&qu ...
随机推荐
- codevs1690 开关灯
1690 开关灯 USACO 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description YYX家门前的街上有N( ...
- 解决ie8下页面刚出现时候的晃动问题
出现这个问题的原因的页面的高度超过一屏,这个时候需要在开始的时候给 html,body {overflow:scroll;overflow-x:hidden}; 这样就可以解决这个问题了
- 【HDOJ5527】Too Rich（贪心，构造）
题意:给定10种面额的货币和它们的数量上限,问构造出恰好总额为P的最小张数,无解输出-1 T=2e4,p<=1e9,c[i]<=1e5 思路:From https://blog.csdn. ...
- input file 修改按钮名称
解决方法: 1)页面上放个隐藏的<input type=“file” /> 2)然后加上一个文本input(type="text")和一个按钮input(type=&q ...
- javascript 实现 接口编程
// Constructor. var Interface = function (name, methods) { if (arguments.length != 2) { throw new Er ...
- MSP430 G2553 寄存器列表与引脚功能
USCI_B0 USCI_B0 发送缓冲器UCB0TXBUF 06Fh USCI_B0 接收缓冲器UCB0RXBUF 06Eh USCI_B0 状态UCB0STAT 06Dh USCI B0 I2C ...
- nodejs后台启动
可避免关闭窗口,程序就关闭,可在后台运行 安装forever包,一般用于服务器,调试环境可不安装 npm install forever -g 启动方式如图: 查询后台运行哪些程序 forever l ...
- 关于centos防火墙
Centos升级到7之后,内置的防火墙已经从iptables变成了firewalld Centos7默认安装了firewalld,如果没有安装的话,可以使用 yum install firewalld ...
- 洛谷 P1865 A % B Problem[筛素数/前缀和思想/区间质数个数]
题目描述 区间质数个数 输入输出格式 输入格式: 一行两个整数 询问次数n,范围m 接下来n行,每行两个整数 l,r 表示区间 输出格式: 对于每次询问输出个数 t,如l或r∉[1,m]输出 Cros ...
- 洛谷——1508 Likecloud-吃、吃、吃
题目背景 问世间,青春期为何物? 答曰:“甲亢,甲亢,再甲亢:挨饿,挨饿,再挨饿!” 题目描述 正处在某一特定时期之中的李大水牛由于消化系统比较发达,最近一直处在饥饿的状态中.某日上课,正当他饿得头昏 ...