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>