vue3父给子传值响应式

在Vue 3中，可以通过使用props属性来实现父组件向子组件传值，并且让子组件对这些值进行响应式更新。

首先，在父组件中定义需要传递给子组件的属性。在子组件中，通过props属性接收这些属性。可以使用v-bind指令将父组件的属性绑定到子组件的props上。这样，在父组件中修改这些属性的值时，子组件也会相应地更新。

下面是一个简单的示例代码：

父组件：

<template>
  <div>
    <ChildComponent :message="message" />
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent component'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'New message from parent component';
    }
  }
};
</script>

子组件：

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

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

在这个例子中，父组件通过props属性将message属性传递给子组件。子组件接收到这个属性后，可以在模板中使用它，并且当父组件修改message的值时，子组件会自动更新。

需要注意的是，在Vue 3中，props属性是只读的。如果需要在子组件中修改这些属性的值，并让父组件也能收到更新，可以使用emit事件来向父组件发送消息，然后在父组件中处理这个事件。