1 配置全局組件

當一個組件使用頻率非常高的時候，可以考慮設置其為全局組件，方便其他地方調用。

 案例------我這兒封裝一個Card組件想在任何地方去使用：

<template>
    <div class="card">
        <div class="card-header">
            <div>主標題</div>
            <div>副標題</div>
        </div>
        <div v-if="content" class="card-content">
            {{ content }}
        </div>
    </div>
</template>
<script setup lang="ts">
type Props = {
    content?: string
}

defineProps<Props>()
</script>

<style scoped lang="less">
@border: #ccc;
.card {
    border: 1px solid;
    &:hover {
        box-shadow: 0 0 20px @border; //放在上面的效果
    }
    &-header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid @border;
    }
    &-content {
        padding: 10px;
    }
}
</style>

使用方法：在main.ts 引入我們的組件跟隨在createApp(App) 後面 切記不能放到mount 後面這是一個鏈式調用用，其次調用 component 第一個參數組件名稱 第二個參數組件實例。

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/reset/index.less'
import Card from './components/Card/index.vue'
createApp(App).component('Card',Card).mount('#app')

使用方法：直接在其他vue頁面 立即使用即可 無需引入

<template>
 <Card></Card>
</template>

2 配置局部組件

<template>
  <div class="wraps">
    <layout-menu :flag="flag" @on-click="getMenu" @on-toogle="getMenuItem" :data="menuList" class="wraps-left"></layout-menu>
    <div class="wraps-right">
      <layout-header> </layout-header>
      <layout-main class="wraps-right-main"></layout-main>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { reactive,ref } from "vue";
import layoutHeader from "./Header.vue";
import layoutMenu from "./Menu.vue";
import layoutMain from "./Content.vue";

就是在一個組件內（A） 通過import 去引入別的組件(B) 稱之為局部組件，應為B組件只能在A組件內使用 所以是局部組件，如果C組件想用B組件 就需要C組件也手動import 引入 B 組件。

3 配置遞歸組件

原理跟我們寫js遞歸是一樣的 自己調用自己 通過一個條件來結束遞歸 否則導致記憶體泄漏

案例遞歸樹：在父組件配置數據結構 數組對象格式 傳給子組件

<template>
　　<div>
　　　　<Tree :data="data"></Tree>
　　</div>
</template>

<script>

import Tree from '../../components/Tree/index.vue'

type TreeList = {
  name: string;
  icon?: string;
  children?: TreeList[] | [];
};
const data = reactive<TreeList[]>([
  {
    name: "no.1",
    children: [
      {
        name: "no.1-1",
        children: [
          {
            name: "no.1-1-1",
          },
        ],
      },
    ],
  },
  {
    name: "no.2",
    children: [
      {
        name: "no.2-1",
      },
    ],
  },
  {
    name: "no.3",
  },
]);

</script>

子組件接收值 第一個script

type TreeList = {
  name: string;
  icon?: string;
  children?: TreeList[] | [];
};
 
type Props<T> = {
  data?: T[] | [];
};
 
defineProps<Props<TreeList>>();
 
const clickItem = (item: TreeList) => {
  console.log(item)
}

子組件增加一個script 定義組件名稱為了 遞歸用 ：

<script lang="ts">
export default {
  name:"TreeItem"
}
</script>

TreeItem 其實就是當前組件 通過import 把自身又引入了一遍 如果他沒有children 了就結束：

<template>
    <div style="margin-left: 10px;">
        <!-- {{data}} -->
        <div :key="index" v-for="(item, index) in data">{{ item.name }}
            <TreeItem v-if="item?.children?.length" :data="item.children"></TreeItem>
        </div>
    </div>
</template>

<script setup lang="ts">
import TreeItem from './index.vue'
type TreeList = {
    name: string,
    icon?: string,
    children?: TreeList[] | []
}

type Props = {
    data?: TreeList[] 
}

defineProps<Props>()

</script>

4 動態組件

什麼是動態組件 就是：讓多個組件使用同一個掛載點，並動態切換，這就是動態組件。在掛載點使用component標簽，然後使用v-bind:is=”組件”

用法如下:引入組件

import A from './A.vue'
import B from './B.vue'
import C from './C.vue'

<component :is="current.comName"></component>

通過is 切換 A B 組件,使用場景,tab切換 居多

註意事項

1.在Vue2 的時候is 是通過組件名稱切換的 在Vue3 setup 是通過組件實例切換的

2.如果你把組件實例放到Reactive Vue會給你一個警告runtime-core.esm-bundler.js:38 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.Component that was made reactive:這是因為reactive 會進行proxy 代理 而我們組件代理之後毫無用處 節省性能開銷 推薦我們使用shallowRef 或者 markRaw 跳過proxy 代理.

type Tabs = {
    name: string,
    comName: any
}

const data = reactive<Tabs[]>([
    {
        name: "我是組件A",
        comName: markRaw(A)
    },
    {
        name: "我是組件B",
        comName: markRaw(B)
    },
    {
        name: "我是組件C",
        comName: markRaw(C)
    },
])

type Com = Pick<Tabs, "comName">

let current = reactive<Com>({
    comName: data[0].comName
})


const switchTabs = (item: Tabs) => {
    current.comName = item.comName
}