根据条件将不同的子元素添加到动态 Vue 组件中？

Question

我正在使用 Vuetify 的 navigation drawer。导航结构来自 Vuex 商店。

想法是将导航结构存储到一个对象中并从那里构建导航，因此我选择使用动态组件<component :is="componentName"/>。

我有 2 个组件，它们需要不同的子组件，所以我尝试告诉 dynamic component 根据当前组件设置正确的 child。

<template>
  <v-navigation-drawer
    app
    stateless
    value="true"
  >
    <v-list>
      <component
        v-for="(item, i) in $store.state.leftMenu.structure"
        :key="i"
        :is="item.submenus ? 'vListGroup' : 'vListTile'"
        :prepend-icon="item.icon"
      >
        <template v-if="item.submenus">
          <template v-slot:activator>
            <v-list-tile>
              <v-list-tile-title v-text="item.title"/>
            </v-list-tile>
          </template>

          <v-list-group
            v-for="(submenu, i) in item.submenus"
            :key="i"
            no-action
            sub-group
          >
            <template v-slot:activator>
              <v-list-tile>
                <v-list-tile-title v-text="submenu.title"/>
              </v-list-tile>
            </template>

            <v-list-tile
              v-for="(submenuChild, i) in submenu.childs"
              :key="i">
              <v-list-tile-title v-text="submenuChild.title"/>
              <v-list-tile-action>
                <v-icon v-text="submenuChild.icon"/>
              </v-list-tile-action>
            </v-list-tile>
          </v-list-group>
        </template>
        <template v-else>
          <v-list-tile-action>
            <v-icon v-text="item.icon"/>
          </v-list-tile-action>
          <v-list-tile-title v-text="item.title"/>
        </template>
      </component>
    </v-list>
  </v-navigation-drawer>
</template>

这是我得到的：

Errors compiling template: <template v-slot> can only appear at the root level inside the receiving the component
<template v-if="item.submenus">
 <template v-slot:activator>
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^
     <v-list-tile>
       ^^^^^^^^^^^^^^^^^^^^^^^
         <v-list-tile-title v-text="item.title"/>

我做错了什么？

Answer 1

您应该将受保护的v-if 代码移动到vListGroup 和vListTile 组件中，并将信息（item.title、item.submenus、submenu.title 等）作为道具传递给它们。

使用:is的漏洞在于不使用v-if渲染组件，而是依靠props传递信息。

另一种方法是完全放弃<component :is，直接在循环内使用v-if，然后再次通过props传递信息。