- 父组件通过
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事件，并且传递一个字符串参数这是来自子组件的消息。
解释
defineEmits：这是Vue 3提供的一个组合API函数，用于定义子组件可以触发哪些事件。在这个例子中，我们定义了一个名为child-event的事件。emit：这是Vue 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中组件间通信的一种基本且常用的方式。
