vue3 组件通信方式 具体代码实现

在 Vue 3 中，有多种方式可以实现组件之间的通信。以下是一些常见的方法和代码示例：

1. Props & Events（父组件传递数据给子组件，子组件通过事件向父组件发送消息）：

- 父组件传递数据给子组件（props）：

<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent',
    };
  },
};
</script>

- 子组件接收父组件传递的数据（props）：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message'],
};
</script>

- 子组件通过事件向父组件发送消息（events）：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageSent', 'Hello from child');
    },
  },
};
</script>

- 父组件接收子组件发送的消息（events）：

<template>
  <div>
    <child-component @messageSent="handleMessage"></child-component>
    <p>Received message: {{ receivedMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      receivedMessage: '',
    };
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message;
    },
  },
};
</script>

2. Provide & Inject（祖先组件提供数据，后代组件注入数据）：

- 祖先组件提供数据（provide）：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import { provide } from 'vue';

export default {
  setup() {
    provide('message', 'Hello from ancestor');
  },
};
</script>

- 后代组件注入数据（inject）：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return {
      message,
    };
  },
};
</script>

这是一些常见的 Vue 3 组件通信方式的代码实现。根据实际需求，你可以选择合适的方式来进行组件通信。