1 配置全局组件
当一个组件使用频率非常高的时候 ，可以考虑设置其为全局组件 ，方便其他地方调用 。
案例------我这儿封装一个Card组件想在任何地方去使用：
使用方法：在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>
<!-- {{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
}
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
