vue实例的$on和$emit的使用？

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>

子组件AChildA:

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

子组件BChildB:

<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进行调用，好处是父子组件或者兄弟组件，都可以通过这种方式进行通信；

vue实例的$on和$emit的使用？

猜你喜欢