不要在 Vue、TailwindUI 和 Headless UI 中使用内置或保留的 HTML 元素

Posted 2023-03-06

【中文标题】不要在 Vue、TailwindUI 和 Headless UI 中使用内置或保留的 HTML 元素

【英文标题】：Do not use built-in or reserved HTML elements with Vue, TailwindUI and Headless UI

【发布时间】：2021-11-22 14:30:49

【问题描述】：

我正在尝试将 TailwindUI / Headless UI 菜单（下拉菜单）添加到 Vue，但在控制台中出现两个错误：

不要使用内置或保留的 html 元素作为组件 ID：菜单

和

错误： 缺少父 组件

我在 Laravel 8 应用程序中使用 Vue 3，这是 app.js 的样子：

import  Menu, MenuButton, MenuItems, MenuItem  from "@headlessui/vue";
const app = createApp(
  ...
);
app.component('menu', Menu);
app.component('menubutton', MenuButton);
app.component('menuitems', MenuItems);
app.component('menuitem', MenuItem);
app.mount("#app");

这是视图的一个最小示例：

<Menu>
  <MenuButton>More</MenuButton>
  <MenuItems>
    <MenuItem v-slot=" active ">
      <a :class=' "bg-blue-500": active ' href="/test">
        Test
      </a>
    </MenuItem>
  </MenuItems>
</Menu>

我已经尝试了所有我能想到的并且迷路了！有什么想法吗？

【参考方案1】：

不要使用<Menu>-element，因为它是built-in HTML 元素。

只需重命名为 CustomMenu 之类的名称

import  Menu as CustomMenu, ...  from ...
app.component('menu', CustomMenu);
<CustomMenu>
...

【讨论】：

谢谢@tauzN，我现在试过了，但我仍然收到错误“错误： 缺少父

实际上它确实有效！我需要重命名所有导入，例如“import Menu as HeadlessMenu, MenuButton as HeadlessMenuButton, MenuItems as HeadlessMenuItems, MenuItem as HeadlessMenuItem from "@headlessui/vue";"然后像“app.component('headlessmenu', HeadlessMenu); ... etc”这样的所有导出，然后它工作得很好。谢谢tauzN！

很高兴听到。应该没有必要。可能是我的拼写错误，导致它不起作用。我将<CutomMenu> 更改为<CustomMenu>

我确实尝试过，只导入“原样”菜单，其余部分保持原样，但随后出现菜单按钮、菜单项和菜单项的“无法解析组件”错误。当我重命名所有这些以使每个都具有相同的前缀时，它就起作用了。无论如何，它现在工作得很好，再次感谢！