vue 子组件获取父组件数据

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

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

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

export default {
  data() {
    return {
      parentData: 'Hello World'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

在上面的代码中，父组件通过v-bind指令将parentData数据传递给子组件。子组件通过props属性来接收这个数据：

<template>
  <div>
    <p>子组件数据：{{ childProp }}</p>
  </div>
</template>

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

这样，子组件就能够获取到父组件传递过来的数据。在子组件中，可以直接使用this.childProp来访问该数据。