一、組件注冊的方式

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

1. 全局注冊

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

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

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

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

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

這里比較有意思的點是，在component方法中以Pascal-Case命名，則在模板中使用該字符時既可以用Kebab-Case也可以使用Pascal-Case，而使用中橫線命名法Kebab-Case注冊，則模板中只能使用Kebab-Case形式來使用。

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

以上便是對于全局注冊所要分享的知識點，接下來讓我們再聊聊局部注冊。

2. 局部注冊

局部注冊的使用場景相較于全局注冊就廣多了，因為一般而言我們更需要的是按需加載，而不是在項目啟動時就將所有需要的組件進行注冊，這將消耗較多的性能。

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

對于標簽的命名與使用與全局組件注冊的特性一致。

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

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

最新評論