Vue カスタム イベントの使用法と一般的なシナリオ

<!-- 父组件 -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    triggerEvent() {
      this.$emit('custom-event', 'Hello, world!');
    },
    handleEvent(data) {
      console.log(data); // 输出：Hello, world!
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1>子组件</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit('custom-event', 'Hello, world!');
  }
}
</script>

<!-- 组件A -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  methods: {
    triggerEvent() {
      eventBus.$emit('custom-event', 'Hello, world!');
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <h1>组件B</h1>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  mounted() {
    eventBus.$on('custom-event', data => {
      console.log(data); // 输出：Hello, world!
    })
  }
}
</script>

<!-- eventBus.js -->
import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

<!-- 父组件 -->
<template>
  <div>
    <p>父组件提供的数据：{{ data }}</p>
    <grand-child-component></grand-child-component>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      data: 'Hello, world!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件注入的数据：{{ injectedData }}</p>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <p>孙子组件注入的数据：{{ injectedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>