小白有关Vue中$on和$emit的看法和一些疑惑

2,538 阅读1分钟

on和emit

<html>
  <head>
    <title>$emit 和 $on</title>
    <script 	src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <button @click="boost">触发事件</button>
    </div>
    <script>
      new Vue({
        el: '#root',
        data() {
          return {
            message: 'hello vue'
          }
        },
        created() {
          this.$on('my_events', this.handleEvents)
        },
        methods: {
          handleEvents(e) {
            console.log(this.message, e)
          },
          boost() {
            this.$emit('my_events', 'my params')            
          }
        }
      })
    </script>
  </body>
</html>

1.$on事件

首先先看官方文档

​ 可以看出,他主要是和$emit 配合使用。第一个是 事件 名称(也可以是一个数组,通过调试也可以看出来)。 第二个是回调函数,也就是 事件的执行函数

2.$emit事件

​ 也是先看官方文档

$emit连接

官方文档上说的是,附加参数会传给监听器回调,但事实上是

这个原因是什么呢? 我也尝试了利用数组循环,同样也不行。只会console.log 第一个,如果传入的是一个数组,会直接把数组输出

请教各位大佬。