<菜单项 /> 缺少父项<菜单项 /> 组件错误(菜单项在插槽中)

Question

我正在创建一个名为<<strong>下拉菜单的组件。祝辞。

下拉组件依次使用其他组件:菜单、菜单项、菜单项和菜单按钮从headlessui/vue库.

我的想法是，你可以把任何内容在下拉菜单，这就是为什么我创建了一个槽名为#contentdropdown。

问题是，当我将这个插槽内容传递给Dropdown组件时，Vue给了我以下错误:

& lt;子菜单/比;是想念父母

这是我的下拉组件代码:

<template>
<Menu as="div" class="relative inline-block text-left">
<div>
<MenuButton class="btn inline-flex justify-center w-full text-sm" :class="'btn-'+variant">
Options
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
</MenuButton>
</div>
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<slot name="contentdropdown"></slot>
</transition>
</Menu>
</template>
<script>
import { Menu, MenuButton } from '@headlessui/vue'
import { ChevronDownIcon } from '@heroicons/vue/solid'
import { vVariantProp } from '../../../../constants'
import { reactive, computed } from 'vue';
export default {
name: 'dropdown',
props: {

...vVariantProp,
},
setup(props) {
props = reactive(props);

return {

}
},

};
</script>

为什么它需要父组件Menu?，如果实际上我已经在组件内部绘制槽，并将其导入到Dropdown组件中。

这是我通过#contentdropdown槽传递内容给Dropdown组件的方式:

<Dropdown v-bind="{'variant':'primary'}">
<template #contentdropdown>
<MenuItems class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1">
<MenuItem>
<a href="#" class="block px-4 py-2 text-sm">Subitem1</a>
</MenuItem>
<MenuItem>
<a href="#" class="block px-4 py-2 text-sm">Subitem2</a>
</MenuItem>
</div>
</MenuItems>
</template>
</Dropdown>

Answer 1

错误<MenuItems /> is missing a parent <Menu /> component不是Vue特有的错误。这是headlessui/vue抛出的错误- source

MenuItems组件(以及MenuButon等)——看医生是设计用于在Menu组件。它使用inject进入Menu组件提供的状态。你无法改变它——它就是这样设计的

问题是Vue中的slot内容(在上一个代码示例中<template #contentdropdown>中的所有内容)总是在父作用域

中呈现。

父模板中的所有内容都在父范围内编译;子模板中的所有内容都在子作用域中编译。

这意味着作为插槽内容呈现的MenuItems无法访问由在Dropdown组件中呈现的Menu组件生成的provide数据

我看不出有什么办法可以克服这个限制。你需要改变你的设计(或者向headlessui/vue维护者描述你的用例，并要求他们实现与子组件共享MenuContext的替代方法——例如使用slot props)