Vue3 中全局组件、基本组件、递归组件的用法详解

配置全局组件

有些组件使用频率非常高,几乎每个页面都在使用,这时候我们可以把它封装成全局组件。

例如,下面封装了一个 A 组件:

html 复制代码
<template>
  <div>{{msg}}</div>
</template>
 
<script setup lang="ts">
type Props = {
    msg:string
}
defineProps<Props>()
</script>

注册方法如下:

在 main.ts 中引入组件 A ,然后使用 app 调用 component,第一个参数是组件名称,第二个参数是组件实例(注意:切记不能放到mount 后面,这是一个链式调用)

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import A from './components/A.vue'
 
const app=createApp(App)
app.component('A',A)
app.mount('#app')

在其他 vue 页面中直接使用即可,无需引入,使用方法如下:

html 复制代码
<template>
 <A></A>
</template>

批量注册全局组件

其实就是通过 for 循环遍历一下然后通过 app.component 注册。

配置局部组件

其实就是在一个组件内(A)通过 import 去引入别的组件(B) 。

因为 B 组件只能在 A 组件内使用,所以是局部组件;如果 C 组件想用 B 组件,那么就需要 C 组件也手动 import 引入 B 组件,用法如下:

javascript 复制代码
<script setup lang="ts">
import B from './components/B.vue'
</script>

<template>
    <div>这是A组件</div>
    <B></B>
</template>

配置递归组件

原理跟我们写 js 递归是一样的,自己调用自己,通过一个条件来结束递归,否则会导致内存泄漏。

这里,假如我们创建的组件是 A.vue,递归组件调用方式如下:

  1. 直接使用文件名当组件名,那么递归调用如下:
html 复制代码
<template>
  <div>
    <!-- 递归调用 A-->
    <A/>
  </div>
</template>
<script setup lang="ts">
、、、
</script>
  1. 在增加一个 script 通过 export 添加 name,那么递归调用如下:
javascript 复制代码
<template>
  <div>
    <!-- 递归调用 A -->
    <RecursiveComponent />
  </div>
</template>

<script setup lang="ts">
、、、
</script>

<script lang="ts">
export default {
  name:"RecursiveComponent"
}
</script>
相关推荐
Panda__Panda1 分钟前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机1 小时前
Promise 常见面试题(持续更新中)
前端·javascript
nueroamazing2 小时前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt
WebDesign_Mu4 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
噢,我明白了4 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
学编程的小虎4 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
做好一个小前端4 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
LuckySusu5 小时前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu5 小时前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu5 小时前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js