Vue 3 父子组件传递数据

?父子组件通信方式：

#### 1. **Props 传递数据**：
? ?- 父组件通过属性绑定将数据传递给子组件。
? ?- 子组件通过在 `props` 对象中声明来接收父组件传递的数据。

**示例**：
```vue
// ParentComponent.vue
<template>
? <ChildComponent :message="messageFromParent" />
</template>

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

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

// ChildComponent.vue
<template>
? <div>{{ message }}</div>
</template>

<script>
export default {
? props: {
? ? message: String,
? },
};
</script>
```

#### 2. **子向父传递数据**：
? ?- 使用 `emit` 在子组件中触发自定义事件，传递数据给父组件。
? ?- 父组件监听子组件的自定义事件，并在对应的方法中处理数据。

**示例**：
```vue
// ChildComponent.vue
<template>
? <button @click="sendDataToParent">Send Data</button>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
? setup(props, { emit }) {
? ? const dataToSend = ref('Data from child');

? ? const sendDataToParent = () => {
? ? ? emit('child-event', dataToSend.value);
? ? };

? ? return {
? ? ? sendDataToParent,
? ? };
? },
});
</script>

// ParentComponent.vue
<template>
? <ChildComponent @child-event="handleChildData" />
</template>

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

export default {
? methods: {
? ? handleChildData(dataFromChild) {
? ? ? console.log('Received data from child:', dataFromChild);
? ? ? // Handle the received data from the child component
? ? },
? },
? components: {
? ? ChildComponent,
? },
};
</script>
```

#### 3. **Provide / Inject**：
? ?- 使用 `provide` 在祖先组件中提供数据，然后使用 `inject` 在子孙组件中接收这些数据。

**示例**：
```vue
// AncestorComponent.vue
<script>
import { provide } from 'vue';

export default {
? setup() {
? ? const sharedData = 'Shared data from ancestor';

? ? provide('shared', sharedData);
? },
};
</script>

// DescendantComponent.vue
<template>
? <div>{{ sharedData }}</div>
</template>

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

export default {
? setup() {
? ? const sharedData = inject('shared');

? ? return {
? ? ? sharedData,
? ? };
? },
};
</script>