vue3setup 子传父

在 Vue 3 中，可以使用 `provide` 和 `inject` 实现子组件向父组件传递数据。

在父组件中，使用 `provide` 方法来提供数据：

<template>
  <div>
    <h1>父组件</h1>
    <child :message="message" />
  </div>
</template>

<script>
import { provide } from 'vue';
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  data() {
    return {
      message: 'Hello from parent',
    };
  },
  setup() {
    provide('parentMessage', 'Hello from parent');
  },
};
</script>

在子组件中，使用 `inject` 方法来获取数据：

<template>
  <div>
    <h2>子组件</h2>
    <p>父组件传递的消息：{{ message }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('parentMessage');
    return { message };
  },
};
</script>

在子组件中，使用 `inject` 方法获取父组件提供的数据时，需要传入提供的键名。在本例中，键名为 `'parentMessage'`。这样，子组件就可以获取到父组件提供的数据了。