vue中$on怎么用

这篇文章给大家分享的是有关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>    <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怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！