vue3的父向子传值实时更新

在 Vue 3 中，你可以使用 props 来实现父组件向子组件传值，并且通过响应式系统来实现实时更新。

首先，在父组件中，你需要定义一个数据属性，并将它传递给子组件作为 prop。例如，我们定义一个名为 "message" 的数据属性：

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

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

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

在这个例子中，我们将父组件的 "message" 数据属性传递给了子组件。

然后，在子组件中，你可以使用 props 来接收父组件传递的值，并将它绑定到子组件的模板中。例如，在子组件的模板中展示接收到的 "message" 值：

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

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

现在，当你在父组件中更新 "message" 的值时，子组件也会随之实时更新。

需要注意的是，Vue 3 中使用了 Composition API，你也可以使用 provide/inject 来实现父向多层嵌套子组件传值。但是对于简单的父向子传值情况，使用 props 是最常见的做法。