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

在Vue中，子组件可以通过几种方式实时获取父组件的数据。最常见的方法是使用props传递数据，并通过监听器watch来监控这些props的变化。

以下是一个简单的例子：

父组件 (ParentComponent.vue):

<template>
  <div>
    <child-component :parentData="parentData" />
    <button @click="updateData">更新数据</button>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '初始数据'
    };
  },
  methods: {
    updateData() {
      this.parentData = '更新后的数据';
    }
  }
};
</script>

子组件 (ChildComponent.vue):

<template>
  <div>
    子组件接收到的数据: {{ parentData }}
  </div>
</template>
 
<script>
export default {
  props: {
    parentData: {
      type: String,
      default: ''
    }
  },
  watch: {
    parentData(newVal, oldVal) {
      console.log('数据已更新:', newVal);
    }
  }
};
</script>

在这个例子中，当父组件的parentData更新时，子组件通过props接收这个数据，并且使用watch属性来监控parentData的变化，一旦变化发生，就可以在控制台打印出新的数据。这样子组件就能实时获取到父组件的数据了。