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>
相关推荐
王哲晓31 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v35 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry2 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢3 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落3 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt