一、組件注冊(cè)的方式

在Vue中組件的注冊(cè)一般可以分為兩種方式，你可以在main.ts或globalComponents.ts等統(tǒng)一管理文件中對(duì)公共組件進(jìn)行注冊(cè)。也可以在父組件中引入組件并在components屬性中對(duì)組件進(jìn)行按需注冊(cè)（OptionsAPI），這樣便可以在template標(biāo)簽中直接使用。

1. 全局注冊(cè)

全局組件的好處便是在組件內(nèi)部不需要導(dǎo)入文件并進(jìn)行局部注冊(cè)，便可以直接在template上直接使用該子組件。全局注冊(cè)一般是用于注冊(cè)公共組件（在一個(gè)組件庫(kù)/多個(gè)組件內(nèi)部都會(huì)使用到的組件）。

全局注冊(cè)需要使用到Vue應(yīng)用實(shí)例上的component方法來(lái)進(jìn)行注冊(cè)，在聊component用法之前，我們可以簡(jiǎn)單認(rèn)識(shí)一下Vue應(yīng)用實(shí)例上有哪些方法？(應(yīng)用實(shí)例指的是new Vue得到的對(duì)象或createApp得到的對(duì)象）具體的可以參照「Application Api官方文檔」。我們用的較多的便是其中的mount、use方法，一個(gè)是用于掛載DOM真實(shí)對(duì)象，一個(gè)用于安裝相關(guān)的插件。
其次便是我們要聊到的全局組件注冊(cè)的方法component了。方法接收兩個(gè)參數(shù)，分別是組件名稱(chēng)與組件本身，以下為Vue官方給出的component方法的TypeScript注解：

interface App {
  component(name: string): Component | undefined
  component(name: string, component: Component): this
}

Component本質(zhì)上是一個(gè)對(duì)象，在Vue項(xiàng)目中我們雖然使用的是單文件的.vue文件來(lái)構(gòu)建一個(gè)組件，但經(jīng)過(guò)vue-loader的解析之后得到的其實(shí)就是一個(gè)對(duì)象，通過(guò)打印main.ts中引入的App.vue我們可以得到以下結(jié)果，可以很明顯的看出Component本質(zhì)就是一個(gè)對(duì)象。

接著我們來(lái)聊聊要怎么使用component方法進(jìn)行公共組件的全局注冊(cè)，只需要將組件的命名填入以及對(duì)應(yīng)的組件對(duì)象傳入即可完成注冊(cè)。這里的命名推薦使用Kebab-Case與Pascal-Case也就是中橫線命名法與大駝峰命名法，原因是避免與HTML的保留標(biāo)簽沖突而導(dǎo)致一些意料之外的沖突。

這里比較有意思的點(diǎn)是，在component方法中以Pascal-Case命名，則在模板中使用該字符時(shí)既可以用Kebab-Case也可以使用Pascal-Case，而使用中橫線命名法Kebab-Case注冊(cè)，則模板中只能使用Kebab-Case形式來(lái)使用。

import { createApp } from "vue";
import App from "./App.vue";
import MyComponent from "./components/MyComponent.vue";
const app = createApp(App);
// 使用Pascal-Case命名規(guī)則, 在template標(biāo)簽中可以使用 MyComponent 也可以使用 my-component?
app.component("MyComponent", MyComponent);
// 使用Kebab-Case命名規(guī)則, 在template標(biāo)簽中只能使用 my-component 而不能使用 MyComponent
app.component("my-component", MyComponent);
app.mount("#app");

以上便是對(duì)于全局注冊(cè)所要分享的知識(shí)點(diǎn)，接下來(lái)讓我們?cè)倭牧木植孔?cè)。

2. 局部注冊(cè)

局部注冊(cè)的使用場(chǎng)景相較于全局注冊(cè)就廣多了，因?yàn)橐话愣晕覀兏枰氖前葱杓虞d，而不是在項(xiàng)目啟動(dòng)時(shí)就將所有需要的組件進(jìn)行注冊(cè)，這將消耗較多的性能。

局部注冊(cè)需要在父組件引入所需要使用到的子組件，并且在父組件實(shí)例中的components屬性中對(duì)子組件進(jìn)行注冊(cè)（使用OptionsAPI的情況下），在使用Composition API的情況下，只需要在script setup中將所需的組件引入就可以在template中直接使用。

對(duì)于標(biāo)簽的命名與使用與全局組件注冊(cè)的特性一致。

<!-- Options API ?-->
<template>
? <my-component></my-component>
</template>
<script>
import MyComponent from './components/MyComponent.vue'
export default {
? name: 'App',
? components: {
? ? // 自定義組件標(biāo)簽名: 組件實(shí)例
? ? MyComponent
? }
}
</script>
<!-- Composition API -->
<template>
? <my-component></my-component>
</template>
<script setup>
import MyComponent from './components/MyComponent.vue';
</script>

到此這篇關(guān)于Vue全局注冊(cè)與局部注冊(cè)兩種組件注冊(cè)的方式的文章就介紹到這了,更多相關(guān)Vue全局注冊(cè)與局部注冊(cè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論