Vue3 全局组件，局部组件，递归组件，动态组件

Vue3 全局组件，局部组件，递归组件，动态组件

全局组件

组件使用的频率高，就可以封装成全局组件

定义全局组件

<template>
  <div class="card">
    <div class="card-header">
      <div class="main-title">{{}}</div>
      <div class="sub-title" v-if=" sub_title ">{{sub_title}}</div>
    </div>
    <div class="card-body">
      <p class="body-content">
        {{content}}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  main_title:string,
  sub_title?:string,
  content:string
}
defineProps<Props>()
</script>

<style lang="less" scoped>
@border_color:#e4e4e7;
  .card {
    border: 1px solid @border_color;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    &-header {
      display: flex;
      flex-direction: column;
      padding: 10px;
      border-bottom: 1px solid @border_color;
      .main-title {
        font-size: 25px;
      }
      .sub-title {
        font-size: 15px;
      }
    }
    &-body {
      padding: 10px;
    }
  }

</style>

注册全局组件

import {createApp} from 'vue'
import App from './App.vue'
import './assets/css/reset.less'
import CusCard from './components/CusCard.vue'

const app = createApp(App)
// 注册全局组件
app.component('cus-card', CusCard)

app.mount('#app')

使用全局组件

<template>
  <div class="content">
    <cus-card :main_title="'八级大狂风'"
              :sub_title="'大学生养猪的历程'"
              :content="'论母猪的产后护理以及幼猪的快速出栏...'"/>
  </div>
</template>

<script setup lang="ts">

import CusCard from "../../components/CusCard.vue";
</script>

<style lang="less" scoped>
.content {
  flex: 1;
  padding: 20px;
  overflow: auto;

  &-item {
    padding: 20px;
    margin: 5px;
    border: 1px solid #d6d3d1;

  }
}
</style>

局部组件

在一个组件A内 通过import 去引入别的组件B，称之为局部组件

递归组件

组件自己调用自己，通过一个条件来结束递归，否则导致内存泄漏
在父组件配置数据结构，数组对象格式 传给子组件

定义递归组件

<template>
  <div>
    <div style="margin: 10px 0px 0px 10px" :key="index" v-for="(node,index) in data">
      <span v-if="node.icon">{{ node.icon }}</span>
      <span>{{ node.name }}</span>
      <TreeItem :data="node.children" v-if="node?.children?.length"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import TreeItem from './index.vue'

type TreeList = {
  name: string,
  icon?: string,
  children?: TreeList[] | []
}
type Props = {
  data: TreeList
}
defineProps<Props>()
</script>

<template>
  <div>
    <div style="margin: 10px 0px 0px 10px" :key="index" v-for="(node,index) in data">
      <span v-if="node.icon">{{ node.icon }}</span>
      <span>{{ node.name }}</span>
      <TreeItem :data="node.children" v-if="node?.children?.length"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import TreeItem from './index.vue'

type TreeList = {
  name: string,
  icon?: string,
  children?: TreeList[] | []
}
type Props = {
  data: TreeList
}
defineProps<Props>()
</script>
<script lang="ts">
// 导出组件
export default {
  name: "TreeItem"
}

</script>

<style lang="less" scoped>

</style>

使用递归组件

<template>
  <div class="left-menu">
    <div>左侧菜单栏</div>
    <Tree :data="data"/>
  </div>
</template>

<script setup lang="ts">
import Tree from "../../components/Tree/index.vue"
import {reactive} from "vue";

type TreeList = {
  name: string,
  icon?: string,
  children?: TreeList[] | []
}

const data = reactive<TreeList[]>([
  {
    name: 'node01',
    children: [
      {
        name: "node01-1",
        children: [
          {
            name: "node01-1-1"

          }
        ]
      }
    ]
  }, {
    name: "node02",
    children: [
      {
        name: "node02-1"

      }
    ]
  }, {
    name: "node03"

  }
])

</script>

动态组件

让多个组件使用同一个挂载点，并动态切换
在挂载点使用 component 标签，然后使用 v-bind:is=“组件”
A组件

<template>
  <div>AAAAAAAAAA</div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">

</style>

B组件

<template>
  <div>BBBBBBBBBB</div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">

</style>

C组件

<template>
  <div>CCCCCCCCCC</div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">

</style>

使用动态组件

<template>
  <div class="content">
    <div class="tabs">
      <div @click="changeTab(tab)" :key="tab.name" v-for="tab in data">{{ tab.name }}</div>
    </div>
    <component :is="currentTab.comName"></component>
  </div>
</template>

<script setup lang="ts">
import A from './A.vue'
import B from './B.vue'
import C from './C.vue'
import {markRaw, reactive} from "vue";

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 currentTab = reactive<Com>({
  comName: data[0].comName
})
const changeTab = (tab: Tabs) => {
  currentTab.comName = tab.comName
}
</script>