vue3 props发送动态值给子组件

在 Vue 3 中，为了向子组件传递动态值，你需要使用 `props` 并结合响应式系统（如 `ref` 或 `computed`）。这里是一个基本的例子，展示了如何在父组件中创建一个动态值，并通过 prop 传给子组件：

**Parent组件（父组件）:**

<template>
  <div>
    <child-component :value="dynamicValue" />
    <button @click="updateDynamicValue">Update Value</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const dynamicValue = ref('初始值') // 可以使用计算属性或 watch 来处理更复杂的逻辑

function updateDynamicValue() {
  dynamicValue.value = '新值' // 动态改变值
}
</script>

**Child组件（子组件）:**

<template>
  <p>子组件接收到的值是: {{ value }}</p>
</template>

<script>
export default {
  props: ['value']
}
</script>

每次点击“Update Value”按钮，`dynamicValue` 的值会更新，然后这个新的值会通过 prop 传递给子组件，子组件内的数据显示也会随之变化。