递归组件/动态组件

今天封装组件的时候，遇到几个关于递归组件/动态组件的小插曲，记录一下。

递归组件：需要再开一个script标签，否则不生效。

<template>
  <div class="menu_content">
    ......
      </template>
      <el-sub-menu
        v-if="item.children && item.children.length > 1"
        :index="item.path"
      >
        <template #title>
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
        递归组件
        <Menu :menuList="item.children"></Menu>
      </el-sub-menu>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
// 获取路由器对象
let $router = useRouter()

// 获取父组件传递来的全部组件信息
defineProps(['menuList'])

// 路由跳转 // index是路由的path
const goRouter = (vc: any) => {
  $router.push(vc.index)
}
</script>

<!-- 递归组件的名字一定要另开一个script标签，且要保持语言要一致 -->
<script lang="ts">
export default {
  name: 'Menu',
}
</script>

动态组件

#default="{ route, Component }"，利用router-view的插槽，route代表出口的当前路由，Component代表是当前组件

<template>
  <!-- 路由的过渡效果 -->
  <router-view #default="{ route, Component }">
    <transition enter-active-class="animate__animated animate__fadeInDown">
      <component :is="Component"></component>
    </transition>
  </router-view>
</template>

<script setup lang="ts"></script>

<!-- 给组件个名字 -->
<script lang="ts">
export default {
  name: 'Main',
}
</script>

<style scoped lang="scss"></style>

动态组件还可以用于，组件的tab切换，比如：

 

...  
  <!-- 左侧图标 -->
  <el-icon style="margin-right: 10px" @click="changeIcon">
    <!-- Fold -->
    <component :is="settingStore.isExpand ? 'Expand' : 'Fold'"></component>
  </el-icon>
...

就酱紫......受不了了，8886.