vue.js - 在 Vue 中使用 Composition API 将数据传递和分配给状态

Question

我是网络编程新手，我尝试使用 Vue 制作简单的动态网络。我在使用组合 API 将数据传递和分配给状态时遇到了一点问题。这里的代码段：

主.vue：

export default defineComponent({
    setup(_, { root: { $api } }) {

    const state = reactive({
      isFetching: true,
      build: [],
      data:{},
      searches: {
         name: [],
         age: []
      },
    });

onMounted(async () => {
  // get data from API
  state.data = dataFromAPI;   
});

const onSearch = (state2) => {
    ....
};

return {
  ...toRefs(state),
  tableHeaders,
  onSearch,
  pagination: {
    rowsPerPage: 10,
  },
};

孩子.vue：

export default defineComponent({
    props: {
        searches: { type: Object, required: true },
    },
    setup(_, { emit }) {
        const state = reactive({
           name: ref(null), // I need assign this with value that I get from API in Main.vue
           age: ref(null),
        });

   const onSearch = () => {
       emit('onSearch', { ...state });
   };

   return {
      ...toRefs(state),
      onSearch,
   };
});

我需要传递数据并将从 Main.vue 中的 API 获得的数据分配给 Child.vue 中的状态。几天前，我没有尝试使用组合 API，我成功地将数据在父子之间或子到父之间传递，但我对组合 API 感到困惑。我阅读了组合 API 文档，但没有找到任何答案。