• 父组件通过props向子组件传递数据。
• 子组件通过$emit触发自定义事件，将信息传递回父组件。

父组件通过props向子组件传递数据

定义Props

首先，你需要在子组件中定义它能够接收的Props。这可以通过使用defineProps函数来完成。defineProps函数会返回一个对象，这个对象包含了所有Prop的响应式引用。

子组件 ChildComponent.vue

<template>
  <div>
    <p>从父组件接收到的消息: {{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script setup>
// 定义Props
const props = defineProps({
  message: {
    type: String,
    required: true,
    default: '默认消息'
  }
})

// 更新消息后通知父组件
function updateMessage() {
  emit('update:message', '新的消息')
}
</script>

在这个例子中，message 是一个必需的字符串类型的Prop，如果未提供，则使用默认值 "默认消息"。

使用Props

接下来，在父组件中，你可以通过传递属性的方式将数据传递给子组件。

父组件 ParentComponent.vue

<template>
  <view>
    <ChildComponent :message="parentMessage" @update:message="onMessageUpdate" />
  </view>
</template>

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

// 父组件的数据
const parentMessage = ref('来自父组件的消息');

// 当子组件发出更新消息事件时，更新父组件的状态
function onMessageUpdate(newMessage) {
  parentMessage.value = newMessage;
}
</script>

在这个例子中，父组件通过:message绑定将parentMessage传递给了子组件。同时，当子组件触发update:message事件时，父组件会监听到并更新其内部的状态。

注意事项

• 在定义Props时，推荐使用类型检查和默认值，以提高代码的健壮性和可读性。
• 当Prop值变化时，组件内的响应式依赖会自动更新。
• 如果需要在子组件中修改Prop传递过来的数据，通常的做法是通过自定义事件通知父组件更新数据，而不是直接修改Prop的值，因为直接修改Prop可能会导致不可预测的行为。

子组件通过$emit触发自定义事件，将信息传递回父组件

在Vue 3中，子组件向父组件通信最常见的做法是通过自定义事件（emits）。子组件通过$emit触发一个事件，并将数据传递给父组件，而父组件则通过事件监听器（@event-name 或 v-on:event-name）来接收这些数据。

示例

下面是一个完整的示例，展示了如何在Vue 3中实现子组件向父组件通信的过程。

父组件 ParentComponent.vue

<template>
  <div>
    <h2>父组件接收的消息: {{ message }}</h2>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

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

// 父组件的数据
const message = ref('');

// 当子组件发出事件时，更新父组件的状态
function handleChildEvent(data) {
  message.value = data;
}
</script>

在这个父组件中，我们创建了一个message响应式引用，并且设置了一个事件监听器@child-event，当子组件触发child-event事件时，就会调用handleChildEvent方法来更新message的值。

子组件 ChildComponent.vue

<template>
  <div>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script setup>
// 定义事件触发器
const emit = defineEmits(['child-event']);

// 发送消息给父组件
function sendMessage() {
  emit('child-event', '这是来自子组件的消息');
}
</script>

在这个子组件中，我们定义了一个按钮，当点击这个按钮时，会触发sendMessage方法。sendMessage方法通过emit函数触发child-event事件，并且传递一个字符串参数这是来自子组件的消息。

解释

1. defineEmits：这是Vue 3提供的一个组合API函数，用于定义子组件可以触发哪些事件。在这个例子中，我们定义了一个名为child-event的事件。
2. emit：这是Vue 3提供的一个函数，用于触发事件。第一个参数是事件名称，后面的参数是传递给父组件的数据。
3. 事件监听器：父组件通过@child-event或v-on:child-event来监听子组件触发的事件，并执行相应的处理函数。

动态事件名称

如果你需要使用动态事件名称，可以使用冒号:或者v-on来绑定事件。

<!-- 使用冒号 -->
<ChildComponent :on-child-event="handleChildEvent" />

<!-- 或者使用 v-on -->
<ChildComponent v-on:child-event="handleChildEvent" />

这样，child-event可以是一个变量的值，使得事件名称可以动态地变化。

通过这种方式，子组件可以有效地与父组件通信，传递数据或状态更新的通知。这是Vue中组件间通信的一种基本且常用的方式。