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

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

父组件：

<template>
  <div>
    <ChildComponent :message="parentValue" />
  </div>
</template>

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

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

子组件：

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

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

在父组件中，我们使用了`v-bind`指令（简写为`:`）来将父组件的`parentValue`动态传递给子组件的`message`属性。子组件通过`props`接收并显示传递过来的值。

这样，父组件的`parentValue`的值会动态传递给子组件，并在子组件中显示出来。你可以根据需要改变`parentValue`的值，子组件会自动更新。