博客

vue实例的

$on

是注册事件，而

$emit

是调用自定义事件；

实际开发中最常用的就是，父组件传递给子组件一个自定义事件，然后子组件通过

$emit

进行调用；

还有一种情况，当使用

同一个vue实例

注册的事件，无论是在哪个组件中，在该vue实例下都可以通过

$emit

进行调用，这样就可以实现兄弟组件间的通信了；

在

main.js

中添加一个全局vue实例，使每个组件注册和调用事件都使用这个vue实例；

Vue.prototype.$bus = new Vue()

父组件：

<template>
  <div>
    <ChildA />
    <hr>
    <ChildB />
  </div>
</template>

<script>
import ChildA from "./components/ChildA.vue";
import ChildB from "./components/ChildB.vue";
export default {
  components: { ChildA, ChildB }
}
</script>

子组件A

ChildA

:

<template>
  <div>
    <h1>我是子组件A</h1>
    <el-button type="primary" @click="activeB">触发子组件B的事件</el-button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 注册事件
    this.$bus.$on("handleA", (e) => {
      alert("子组件A触发了, 接受到子组件B的参数为：" + e)
    })
  },
  methods: {
    activeB() {
      // 触发子组件B的事件
      this.$bus.$emit("handleB", 'AAA')
    }
  }
}
</script>

子组件B

ChildB

:

<template>
  <div>
    <h1>我是子组件B</h1>
    <el-button type="primary" @click="activeA">触发子组件A的事件</el-button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 注册事件
    this.$bus.$on("handleB", (e) => {
      alert("子组件B触发了, 接受到子组件A的参数为：" + e)
    })
  },
  methods: {
    activeA() {
      // 触发子组件A的事件
      this.$bus.$emit("handleA", 'BBB')
    }
  }
}
</script>

因为

this.$bus

是一个全局的vue实例，当使用

$on

注册了一个事件后，在

this.$bus

中就有了这个事件，那么任意组件中都可以通过

this.$bus.$emit

进行调用，好处是父子组件或者兄弟组件，都可以通过这种方式进行通信；