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

在 Vue3 中，父组件向子组件传递动态值可以使用 props 进行传递。在父组件中，可以使用 v-bind 或者简写的冒号语法将数据传递给子组件。

比如，在父组件中有一个动态数据，可以这样传递给子组件：

<template>
  <div>
    <child-component :dynamic-prop="dynamicValue"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      dynamicValue: 'hello, world!',  // 父组件的动态数据
    }
  },
}
</script>

在子组件中，需要声明一个 props 的属性来接收父组件传递过来的值。可以在 props 中定义默认值，以处理传递数据为空的情况。

比如，在子组件中可以这样接收并使用父组件传递的动态数据：

<template>
  <div>
    <p>接收到的动态值是：{{ dynamicProp }}</p>
  </div>
</template>

<script>
export default {
  props: {
    dynamicProp: {
      type: String,   // 父组件传递的数据类型
      default: '',    // 默认值，处理传递数据为空的情况
    },
  },
}
</script>

当父组件的 dynamicValue 值发生变化时，子组件能够自动响应并更新数据。

可以通过修改父组件的 dynamicValue 数据，来动态改变子组件的表现，实现动态传值的效果。