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

Posted 2023-02-16

【中文标题】如何使用 Vue 组合 API 导入其他自定义组件？

【英文标题】：How can I import an other custom component using Vue composition API?

【发布时间】：2021-12-15 16:45:57

【问题描述】：

我正在尝试使用组合 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. 

不仅是一个警告，而且不幸的是我需要它来初始化组件，因此如果没有它的 onMounted 函数，它就不能完全发挥作用，因为它应该是持久的，并且它的状态不能从 localStorage 初始化。

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

编辑：

设法从子组件中删除onMounted，并且我可以在其状态发生变化时在道具中传递一个回调。所以对于这种情况，我解决了这个问题。一般来说，我仍然不知道解决方案。

【问题讨论】：

请在问题中提供***.com/help/mcve。你有一个链接很好，但是当它变得不可用时，这个问题对于未来的读者来说应该是完全可以理解的。考虑解释你想要达到的目标。你所做的是一个永远不应该做的黑客行为。使用组件的唯一正确方法是像组件一样在视图中使用它，即h(Perscombo...)。

感谢您的洞察力。为了更好的可访问性，我正在考虑在一些在线游乐场复制它。我需要一个运行的开发服务器，可能我可以使用 Code Sanbox 或允许运行服务器的类似工具来做到这一点。我会研究这个。编辑：所以我可以在通常传递 html 标记的地方传递导入的组件？ EDIT2：但是如何传递事件处理程序回调？

是的，这就是渲染函数（以及 JSX）背后的想法。如果只允许 HTML 标签，它们就没有多大用处。它没有在 Vue 中完整记录，但这就是它的工作原理。道具作为第二个参数传递，请参阅 v3.vuejs.org/guide/render-function.html 。如果这是你的困难，就是这样。

EDIT3：哦，我的错，应该可以像往常一样使用道具传递事件处理程序。不知何故，所有示例都显示了 HTML 标记，我对它们很感兴趣。

等等，如果我在 props 中传递了v-on:perscombochanged，那么事件处理程序就不会被调用。仍然不知道如何处理导入组件发出的事件。

【参考方案1】：

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

     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]
     );