vue3 子组件实时获取动态变化的父组件的值

在Vue 3中，你可以使用`props`和`emit`来实现子组件实时获取父组件动态变化的值。

首先，在父组件中，将需要传递给子组件的值定义为一个`props`属性。例如，假设父组件中有一个名为`parentValue`的变量：

<template>
  <div>
    <child-component :childValue="parentValue"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '初始值'
    }
  }
}
</script>

然后，在子组件中，接收父组件传递的值，并在父组件值发生变化时更新子组件的值。可以通过`props`定义接收的属性，并使用`watch`监听父组件的值变化：

<template>
  <div>
    <p>父组件的值：{{ childValue }}</p>
  </div>
</template>

<script>
export default {
  props: {
    childValue: {
      type: String,
      required: true
    }
  },
  watch: {
    childValue(newValue) {
      // 当父组件的值发生变化时，更新子组件的值
      this.childValue = newValue;
    }
  }
}
</script>

这样，当父组件的值发生变化时，子组件会实时获取到最新的值并更新显示。

请注意，当父组件的值发生变化时，子组件会被重新渲染。如果你只希望在父组件的值变化时执行一些逻辑而不重新渲染子组件，可以使用`watch`的`immediate: true`选项来避免初始渲染时的不必要更新。