vue 子组件获取父组件的数据

在 Vue 中，子组件可以通过props属性来获取父组件传递的数据。以下是一个简单的示例：

父组件：

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

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

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

子组件：

<template>
  <div>
    <h3>子组件</h3>
    <p>子组件数据: {{ childData }}</p>
  </div>
</template>

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

在上述示例中，父组件通过props属性将parentData传递给子组件，并在子组件中使用{{ childData }}来显示该数据。这样子组件就可以获取并使用父组件的数据了。