vue3+js 父组件给子组件传值 父组件值变了 子组件怎么实时变化

在Vue 3中，父组件向子组件传递值并实现实时变化可以通过props和响应式数据来实现。

首先，在父组件中定义一个数据属性，并将其传递给子组件作为props。这样子组件就可以接收到父组件传递的值。

父组件示例：

<template>
  <div>
    <p>父组件的值：{{ parentValue }}</p>
    <ChildComponent :childValue="parentValue" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '初始值'
    };
  }
};
</script>

然后，在子组件中，通过props接收父组件传递的值，并在模板中使用该值。

子组件示例：

<template>
  <div>
    <p>子组件接收到的值：{{ childValue }}</p>
  </div>
</template>

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

当父组件的值发生变化时，子组件会自动更新。这是因为Vue使用了响应式系统来追踪数据的变化，并在需要更新视图时进行重新渲染。