vue3响应式数据子传父

在 Vue 3 中，父组件与子组件之间的数据传递可以通过 props 和 emit 实现。

首先，将需要在子组件中使用的数据以 props 的方式传递给子组件。在父组件中，通过 v-bind 或者简化的 : 符号将数据绑定到子组件的属性上。例如：

<template>
  <div>
    <child-component :message="parentMessage" @update-message="updateParentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    updateParentMessage(newMessage) {
      this.parentMessage = newMessage;
    }
  }
};
</script>

在上面的例子中，父组件通过传递 `parentMessage` 给子组件的 `message` 属性，让子组件可以访问这个数据。

接下来，在子组件中，可以通过接收父组件传递的属性来使用父组件的数据。在子组件的 props 中定义需要接收的属性，然后在子组件中就可以直接使用这个属性。例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    updateMessage() {
      const newMessage = 'Updated message from child';
      this.$emit('update-message', newMessage);
    }
  }
};
</script>

在子组件中，通过 `props: ['message']` 定义了一个名为 `message` 的属性，然后可以在模板中使用它。当按钮被点击时，通过 `$emit` 方法触发名为 `update-message` 的事件，并将新的消息作为参数传递给父组件。

在父组件中，通过 `@update-message="updateParentMessage"` 监听子组件触发的 `update-message` 事件，并执行相应的方法来更新父组件的数据。

这样，就实现了在 Vue 3 中通过 props 和 emit 进行响应式数据的子传父。