＆lt; menuitems /＆gt;缺少父母＆lt;菜单 /＆gt;组件错误（插槽中的菜单）

Question

我正在Vue3中创建一个at＆lt; 下拉>＆gt;的组件。

下拉组件依次使用其他组件：菜单，menuitems，menuitem和menubutton headelessui/vue库。

我的想法是，您可以将任何内容放在下拉>中，这就是为什么我创建了一个称为 #contentdropdown 的插槽的原因。

问题是，当我将此插槽内容传递给下拉列表组件时，VUE给我以下错误：

＆lt; menuitems /＆gt;缺少父母＆lt;菜单 /＆gt;组件

这是我的下拉组件代码：

<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>

为什么需要parent组件称为菜单？

这就是我通过其#ContentDropdown插槽传递到内容的下拉组件的方式：

<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

错误＆lt; menuitems /＆gt;缺少父母＆lt;菜单 /＆gt;组件不是VUE特定错误。这是 headlessui/vue - source

menuitems component（以及 menubuton etceet et et eft-请参阅 doc ）被设计为在菜单 component中使用。它正在使用注入来点击状态提供了通过菜单组件。您无能为力 - 它是这样设计的

问题是，在vue中始终在＆lt; template＃contentDropdown＆gt; ）始终呈现=“ https://vuejs.org/guide/components/slots.html#render-scope” rel =“ nofollow noreferrer”> parent scope

父模板中的所有内容都在父范围内编译；子模板中的所有内容都在子范围中编译。

这意味着 menuitems 作为插槽内容渲染的无法访问data 提供由菜单组件组件呈现在您的下拉code 组件

我看不出任何方法可以克服此限制。您需要更改设计（或将用例描述为 Headlessui/vue 维护者，并要求他们实现替代方法来共享