vue中$on的用法是什么-Vue.js-PHP中文网

vue中$on的用法是什么

WBOY

发布： 2022-03-17 11:20:56

原创

18006人浏览过

在vue中，“$on”用于监听当前实例上的自定义事件，事件可以由“vm.$emit”触发，回调函数会接收所有传入事件触发函数的额外参数，语法为“vm.$on( event, callback )”。

vue中$on的用法是什么

本文操作环境：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

微信二级防封域名

防封域名方法千千种，我们只做最简单且有用的这一种。微信域名防封是指通过技术手段来实现预付措施，一切说自己完全可以防封的那都是不可能的，一切说什么免死域名不会死的那也是吹牛逼的。我们正在做的是让我们的推广域名寿命更长一点，成本更低一点，效果更好一点。本源码采用 ASP+ACCESS 搭建，由于要用到二级域名，所以需要使用独享云虚机或者云服务器，不支持虚拟主机使用，不支持本地测试。目前这是免费测试版，

查看详情

实例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中文网其它相关文章！