小白有关Vue中$on和$emit的见解和一些疑惑

时间 2020-02-06

标签有关 vue emit 见解一些疑惑繁體版

原文原文链接

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事件

首先先看官方文档 javascript

能够看出，他主要是和$emit 配合使用。第一个是事件名称（也能够是一个数组，经过调试也能够看出来）。第二个是回调函数，也就是 事件的执行函数html

2.$emit事件

也是先看官方文档vue

$emit链接java

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

这个缘由是什么呢？我也尝试了利用数组循环，一样也不行。只会console.log 第一个，若是传入的是一个数组，会直接把数组输出api

请教各位大佬。数组