您好,登录后才能下订单哦!
这篇文章给大家分享的是有关vue中$on怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
在vue中,“$on”用于监听当前实例上的自定义事件,事件可以由“vm.$emit”触发,回调函数会接收所有传入事件触发函数的额外参数,语法为“vm.$on( event, callback )”。
本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。
vue中使用 $on(eventName) 监听事件
$on(eventName) 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$on( event, callback )
参数:
{string | Array} event (数组只在 2.2.0+ 中支持) {Function} callback
实例1 本页面单个事件
<template> <section> <h2>left</h2> <el-button type="primary" @click="isClick">点击</el-button> </section> </template> <script> export default { methods: { isClick() { this.$emit('isLeft', '点击事件!'); } }, mounted() { this.$on('isLeft', (val) => { console.log(val); }); } } </script>
以上代码,是通过按钮的点击事件,然后this.$emit传递事件,然后this.$on捕获本页面的事件
实例2 本页面多个事件
<template> <section> <h2>left</h2> <el-button type="primary" @click="isClick">点击</el-button> <el-button type="primary" @click="isClickOther">点击</el-button> </section> </template> <script> export default { methods: { isClick() { this.$emit('isLeft', '点击事件!'); }, isClickOther() { this.$emit('isRight', ['点击1', '点击2']); } }, mounted() { this.$on('isLeft', (val) => { console.log(val); }); this.$on('isRight', (...val) => { console.log(val); }); this.$on(['isLeft', 'isRight'], () => { console.log(666); }); } } </script>
以上例子,是本页面的两个点击事件,可以同时监听两个事件,也可以同时传多个参数
感谢各位的阅读!关于“vue中$on怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。