根据条件将不同的孩子添加到动态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传递信息。