如何使用Vue composition API导入其他自定义组件？

Question

我正在尝试使用composition API创建Vue 3组件库：

https://github.com/hyperbotauthor/vue3complib

在其中一个组件中，我想导入另一个组合API组件（https://github.com/hyperbotauthor/vue3complib/blob/main/src/components/ChessboardExt.vue）：

import { Perscombo } from "../index"
const PerscomboE = (Perscombo as any).setup

const e = PerscomboE({id: "variant", options: variants}, context)()

const vertContainer = h(
            "div",
            {   
            },
            [e, outerContainer]
        );

这几乎是可行的，因为组件的节点是通过其设置功能创建的，甚至可以正确地呈现在页面上，但是它的onMounted功能没有被正确调用，我收到了警告

onMounted is called when there is no active component instance to be associated with.
Lifecycle injection APIs can only be used during execution of setup().
If you are using async setup(), make sure to register lifecycle hooks before the first await statement. 

这不仅是一个警告，但不幸的是，我需要它来初始化组件，因此如果没有它的onMount ted函数，它就不能完全正常工作，因为它应该是持久的，并且它的状态无法从localStorage初始化。

如何将其他合成API组件正确导入合成API组件的设置中？

编辑：

成功地从子组件中删除了onMounted，并且我可以在其状态发生变化时，在props中传递回调。所以我解决了这个问题。总的来说，我仍然不知道解决办法。

Answer 1

您可以通过h函数传递导入的自定义组件，例如超文本标记语言标记。事件处理与超文本标记语言元素的工作方式相同：您在上以作为处理程序名称的前缀，使用骆驼大小写，并将处理程序作为具有此名称的属性传递：

     const variantCombo = h(Perscombo, {id: props.id + "/variant", options: variants, onPerscombochanged: (event:any) => {
         setVariant()
     }})

     const sizeCombo = h(Perscombo, {id: props.id + "/size", options: sizes, onPerscombochanged: (event:any) => {            
         resize(event.value)
     }})

     const upperControls = h(
         "div",
         {   
         },
         [variantCombo, sizeCombo]
     );