vue2.0 中#$emit,$on的使用详解
作者:m0_37068028 时间:2023-07-02 16:52:27
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on
vm.$on( event, callback )
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$emit( event, […args] )
触发当前实例上的事件。附加参数都会传给 * 回调。
例子:
//父组件
<template>
<ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script>
data () {
return {
selectType: 0,
},
methods: {
onSelectType (type) {
this.selectType = type
}
}
</script>
父组件使用@select-type="onSelectType"@就是v-on的简写,监听由子组件vm.$emit触发的事件,通过onSelectType()接受从子组件传递过来的数据,通知父组件数据改变了。
// 子组件
<template>
<div>
<span @click="select(0, $event)" :class="{'active': selectType===0}"></span>
<span @click="select(1, $event)" :class="{'active': selectType===1}"></span>
<span @click="select(2, $event)" :class="{'active': selectType===2}"></span>
</div>
</template>
<script>
data () {
return {
selectType: 0,
},
methods: {
select (type, event) {
this.selectType = type
this.$emit('select-type', type)
}
}
</script>
子组件通过$emit来触发事件,将参数传递出去。
以上所述是小编给大家介绍的vue2.0 中#$emit,$on的使用详解网站的支持!
来源:http://blog.csdn.net/m0_37068028/article/details/72898119
标签:vue2.0,on,emit
0
投稿
猜你喜欢
ASP编程入门进阶(十一):Chat聊天程序
2008-05-12 07:06:00
Dreamweaver 网页编辑常用表现的实现方法
2010-10-20 20:05:00
浅谈Python中的正则表达式
2023-11-02 12:48:18
Python检查 云备份进程是否正常运行代码实例
2023-07-08 23:59:05
Python常用小技巧总结
2023-02-27 17:50:16
Python 递归式实现二叉树前序,中序,后序遍历
2022-09-22 17:38:32
Python venv虚拟环境跨设备迁移的实现
2022-02-01 07:10:55
Python3中map()、reduce()、filter()的用法详解
2024-01-03 01:27:23
高手进阶:网页设计中的文字运用
2008-10-05 08:58:00
详解Python中的正则表达式的用法
2023-07-25 00:23:13
PHP implode()函数用法讲解
2023-06-19 22:54:34
Python实现自动化域名批量解析分享
2023-01-27 00:04:36
在ASP.NET 2.0中操作数据之五十五:编辑和删除现有的二进制数据
2023-07-10 02:05:43
Python简单读写Xls格式文档的方法示例
2021-11-02 13:27:30
Ubuntu16.04 server下配置MySQL,并开启远程连接的方法
2024-01-17 08:59:10
Mysql 数据库双机热备的配置方法
2024-01-28 12:07:37
Python 遍历列表里面序号和值的方法(三种)
2022-11-29 14:01:06
python selenium 获取标签的属性值、内容、状态方法
2021-03-12 23:02:46
Python OpenCV实现3种滤镜效果实例
2021-06-04 10:20:27
使用python爬虫获取黄金价格的核心代码
2023-11-03 22:55:28