配置全局组件

例如组件使用频率非常高（table，Input，button，等）这些组件 几乎每个页面都在使用便可以封装成全局组件
案例———我这儿封装一个Card组件想在任何地方去使用

  1. <template>
  2.   <div class="card">
  3.      <div class="card-header">
  4.          <div>标题</div>
  5.          <div>副标题</div>
  6.      </div>
  7.      <div v-if='content' class="card-content">
  8.          {{content}}
  9.      </div>
  10.   </div>
  11. </template>
  13. <script setup lang="ts">
  14. type Props = {
  15.     content:string
  16. }
  17. defineProps<Props>()
  19. </script>
  21. <style scoped lang='less'>
  22. @border:#ccc;
  23. .card{
  24.     width: 300px;
  25.     border: 1px solid @border;
  26.     border-radius: 3px;
  27.     &:hover{
  28.         box-shadow:0 0 10px @border;
  29.     }
  31.     &-content{
  32.         padding: 10px;
  33.     }
  34.     &-header{
  35.         display: flex;
  36.         justify-content: space-between;
  37.         padding: 10px;
  38.         border-bottom: 1px solid @border;
  39.     }
  40. }
  41. </style>

image.png
使用方法
在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用
其次调用 component 第一个参数组件名称 第二个参数组件实例

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

使用方法
直接在其他vue页面 立即使用即可 无需引入

  1. <template>
  2. <Card></Card>
  3. </template>

配置局部组件

  1. <template>
  2.   <div class="wraps">
  3.     <layout-menu :flag="flag" @on-click="getMenu" @on-toogle="getMenuItem" :data="menuList" class="wraps-left"></layout-menu>
  4.     <div class="wraps-right">
  5.       <layout-header> </layout-header>
  6.       <layout-main class="wraps-right-main"></layout-main>
  7.     </div>
  8.   </div>
  9. </template>
  11. <script setup lang="ts">
  12. import { reactive,ref } from "vue";
  13. import layoutHeader from "./Header.vue";
  14. import layoutMenu from "./Menu.vue";
  15. import layoutMain from "./Content.vue";

就是在一个组件内（A） 通过import 去引入别的组件(B) 称之为局部组件
应为B组件只能在A组件内使用 所以是局部组件
如果C组件想用B组件 就需要C组件也手动import 引入 B 组件

配置递归组件

原理跟我们写js递归是一样的 自己调用自己 通过一个条件来结束递归 否则导致内存泄漏
案例递归树
在父组件配置数据结构 数组对象格式 传给子组件

  1. type TreeList = {
  2.   name: string;
  3.   icon?: string;
  4.   children?: TreeList[] | [];
  5. };
  6. const data = reactive<TreeList[]>([
  7.   {
  8.     name: "no.1",
  9.     children: [
  10.       {
  11.         name: "no.1-1",
  12.         children: [
  13.           {
  14.             name: "no.1-1-1",
  15.           },
  16.         ],
  17.       },
  18.     ],
  19.   },
  20.   {
  21.     name: "no.2",
  22.     children: [
  23.       {
  24.         name: "no.2-1",
  25.       },
  26.     ],
  27.   },
  28.   {
  29.     name: "no.3",
  30.   },
  31. ]);

子组件接收值

  1. type TreeList = {
  2.   name: string;
  3.   icon?: string;
  4.   children?: TreeList[] | [];
  5. };
  7. type Props<T> = {
  8.   data?: T[] | [];
  9. };
  11. defineProps<Props<TreeList>>();

template
TreeItem 其实就是当前组件 通过import 把自身又引入了一遍 如果他没有children 了就结束

  1.   <div style="margin-left:10px;" class="tree">
  2.     <div :key="index" v-for="(item,index) in data">
  3.       <div @click='clickItem(item)'>{{item.name}}
  4.     </div>
  5.     <TreeItem @on-click='clickItem' v-if='item?.children?.length' :data="item.children"></TreeItem>
  6.   </div>
  7.   </div>

————————————————
版权声明：本文为CSDN博主「小满zs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq1195566313/article/details/122862736