Vue 3 中的父子组件数据传递

Vue 3 提供了灵活而强大的工具，用于在父组件和子组件之间传递数据。在这篇文章中，我们将讨论两种主要的机制：props 和事件。

1. 通过 Props 传递数据

父组件：

在父组件中，通过 props 将数据传递给子组件。假设我们有一个名为 ParentComponent 的父组件：

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

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

子组件：

在子组件中，通过 props 接收来自父组件的数据：

<template>
  <div>
    <h3>子组件</h3>
    <p>{{ message }}</p>
  </div>
</template>

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

export default defineComponent({
  props: {
    message: {
      type: String as PropType<string>,
      required: true,
    },
  },
});
</script>

2. 通过事件传递数据

子组件：

在子组件中，通过 $emit 触发自定义事件，将数据传递给父组件：

<template>
  <div>
    <h3>子组件</h3>
    <button @click="sendDataToParent">发送数据给父组件</button>
  </div>
</template>

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

export default defineComponent({
  methods: {
    sendDataToParent() {
      const dataToSend = 'Data from child!';
      this.$emit('childEvent', dataToSend);
    },
  },
});
</script>

父组件：

在父组件中，通过在子组件上监听自定义事件，获取子组件传递的数据：

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent @childEvent="handleChildEvent" />
    <p>{{ dataFromChild }}</p>
  </div>
</template>

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

export default defineComponent({
  components: {
    ChildComponent,
  },
  data() {
    return {
      dataFromChild: '',
    };
  },
  methods: {
    handleChildEvent(data) {
      this.dataFromChild = data;
    },
  },
});
</script>

通过以上两种方式，我们可以在 Vue 3 中实现父组件与子组件之间的数据传递。这使得我们能够更好地组织和管理组件之间的通信，提高了代码的可维护性和可扩展性。