Vue3系列8--全局组件,局部组件,递归组件

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
}

标签: Javascript

添加新评论