vue3 父子传值通信 props emit 组合式代码

在 Vue 3 中，父子组件之间的通信可以通过 props 和 emit 进行。下面是一个使用组合式代码的示例：

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent :message="message" @update-message="updateMessage" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const message = ref('Hello from parent');

    const updateMessage = (newMessage) => {
      message.value = newMessage;
    };

    return {
      message,
      updateMessage,
    };
  },
};
</script>

子组件：

<template>
  <div>
    <h2>子组件</h2>
    <p>{{ message }}</p>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
import { defineEmit, defineProps } from 'vue';

export default {
  emits: ['update-message'],
  setup(props) {
    const message = defineProps({
      type: String,
      default: props.message,
    });

    const sendMessage = () => {
      const newMessage = 'Hello from child';
      emit('update-message', newMessage);
    };

    return {
      message,
      sendMessage,
    };
  },
};
</script>

在父组件中，我们通过 `:message="message"` 将父组件的 `message` 数据传递给子组件。子组件通过 `defineProps` 定义了一个名为 `message` 的 prop，它的默认值为父组件传递过来的 `message` 数据。

在子组件中，我们通过 `@update-message="updateMessage"` 监听子组件触发的 `update-message` 事件，并在父组件中定义了 `updateMessage` 方法来处理事件。当子组件中的按钮被点击时，会触发 `sendMessage` 方法，该方法通过 `emit` 发射了一个 `update-message` 事件，并传递了新的消息给父组件。

这样，父组件和子组件之间就实现了双向的数据传递和通信。