vue3 父组件向子组件动态传值

在 Vue 3 中，父组件向子组件动态传值，可以通过 props 属性来实现。下面是一个示例：

在父组件中，使用子组件时，可以通过 v-bind 指令将父组件的数据传递给子组件的 props 属性：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: 'Hello from parent'
    };
  }
};
</script>

在子组件中，通过 props 属性接收父组件传递的值：

<template>
  <div>
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  }
};
</script>

在上述示例中，父组件中的 `parentValue` 被动态传递给了子组件的 `value` prop。在子组件中，可以通过 `this.value` 来访问该值。

这样就实现了父组件向子组件动态传值的功能。