在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>
<h1>left</h1>
<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>
<h1>left</h1>
<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.js教程》】
以上就是vue中$on的用法是什么的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
566
