vue3 子组件实时获取父组件数据

在 Vue 3 中，子组件可以通过 Props 来获取父组件的数据。当父组件的数据发生变化时，子组件也会实时获取到最新的数据。

下面是一个示例代码，展示了如何在子组件中实时获取父组件的数据：

在父组件中，通过 Props 将数据传递给子组件：

<template>
  <div>
    <h1>父组件</h1>
    <p>{{ parentData }}</p>
    <ChildComponent :childData="parentData" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '父组件数据'
    };
  }
};
</script>

在子组件中，使用 Props 接收父组件传递的数据，并在模板中使用它：

<template>
  <div>
    <h2>子组件</h2>
    <p>{{ childData }}</p>
  </div>
</template>

<script>
export default {
  props: ['childData']
};
</script>

这样，当父组件的 `parentData` 数据发生变化时，子组件中的 `childData` 数据也会自动更新。

希望这个例子能够帮助到你！如果有任何疑问，请随时提问。