0

我正在使用 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"/>

我做错了什么？

4

1 回答 1

0

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

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

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

于 2019-03-11T11:48:54.403 回答