您好,欢迎访问一九零五行业门户网

vue中$on的用法是什么

在vue中,“$on”用于监听当前实例上的自定义事件,事件可以由“vm.$emit”触发,回调函数会接收所有传入事件触发函数的额外参数,语法为“vm.$on( event, callback )”。
本文操作环境:windows10系统、vue2.9.6版,dell g3电脑。
vue中$on的用法是什么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的用法是什么的详细内容。
其它类似信息

推荐信息