vue中的on和emit

最新推荐文章于 2022-11-22 21:11:56 发布

zxb89757

最新推荐文章于 2022-11-22 21:11:56 发布

阅读量1.9k

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/zxb89757/article/details/109338135

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在vue中，使用on和emit可以实现父子组件传值，利用on和emit还可以实现事件的多重绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <div id="root">
    <button @click="boost">按钮</button>
  </div>
</head>
<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
  <script>
    new Vue({
      el: '#root',
      data(){
        return {
          message: 'hello vue'
        }
      },
      created(){
        this.$on('my_events', this.handleEvents)
      },
      methods:{
        boost(){
          // emit的意思，发射
          this.$emit('my_events','my params')
        },
        handleEvents(e){
          console.log(this.message,e)
        }
      }
    })
  </script>
</body>
</html>

这个例子中，我们本可以直接使用@click来绑定时间，但我们使用了on和emit，看起来麻烦多了，但这样写可以帮助我们将事件的定义和消费分开，实现逻辑的解耦。
在这里插入图片描述
在vue源码中，on方法接收两个参数，第一个event函数名，第二个fn执行的方法，可以看到这里先把Vue的实例传给vm，然后判断event是不是数组，如果是数组，就通过循环的方式来进行赋值，继续调用$on方法，如果不是数组的话，先判断vm是否存在vm._events[event]，如果不存在，就去新建一个，并且把第二个参数fn存到这个数组中。

因此，我们可以同时为一个事件定义多个执行方法
我们可以写成

this.$on('my_events',this.handleEvents)
this.$on('my_events',this.handleEvents2)

这些事件都会加入到vm._events[event]这个数组当中

除此以外，我们也可以为不同的事件，绑定同一个方法

如

this.$on(['my_events1','my_events2'], this.handleEvents)

这样my_events和my_events2触发时都会执行handleEvents方法了

zxb89757

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的on和emit

在vue中，使用on和emit可以实现父子组件传值，利用on和emit还可以实现事件的多重绑定<template> <div id="app"> <button @click="boost">params</button> <button @click="$emit('test',123)">测试</button> </div></template><script>e
复制链接

扫一扫