深入理解 Vue 3实现组件通信的方法

<template>
  <ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent Component!'
    };
  }
};
</script>

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  emits: ['messageSent'],
  methods: {
    sendMessage() {
      this.$emit('messageSent', 'Hello from Child Component!');
    }
  }
};
</script>

<template>
  <ChildComponent @messageSent="handleMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
};
</script>

<template>
  <ParentComponent />
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
  components: {
    ParentComponent
  },
  provide() {
    return {
      grandparentMessage: 'Hello from Grandparent Component!'
    };
  }
};
</script>

<template>
  <div>{{ grandparentMessage }}</div>
</template>
<script>
export default {
  inject: ['grandparentMessage']
};
</script>

import { reactive } from 'vue';
const eventBus = reactive({});
export default eventBus;

<template>
  <button @click="sendMessage">Send Message to Component B</button>
</template>
<script>
import eventBus from './eventBus.js';
export default {
  methods: {
    sendMessage() {
      eventBus.message = 'Hello from Component A!';
    }
  }
};
</script>

<template>
  <div>{{ message }}</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
import eventBus from './eventBus.js';
export default {
  setup() {
    const state = reactive({
      message: ''
    });
    state.message = eventBus.message;
    return {
      ...toRefs(state)
    };
  }
};
</script>