組件注冊
一個 Vue 組件在使用前需要先被“注冊”，這樣 Vue 才能在渲染模板時找到其對應(yīng)的實現(xiàn)。組件注冊有兩種方式：全局注冊和局部注冊。
全局注冊
我們可以使用 Vue 應(yīng)用實例的.component()方法，讓組件在當前 Vue 應(yīng)用中全局可用。
import { createApp } from 'vue'
import App from './App.vue';
import HelloWorld from './components/HelloWorld.vue';
createApp(App).component('HelloWorld', HelloWorld).mount('#app');
全局注冊的問題：
- 全局注冊，但并沒有被使用的組件無法在生產(chǎn)打包時被自動移除 (也叫“tree-shaking”)。如果你全局注冊了一個組件，即使它并沒有被實際使用，它仍然會出現(xiàn)在打包后的 JS 文件中。
- 全局注冊在大型項目中使項目的依賴關(guān)系變得不那么明確。在父組件中使用子組件時，不太容易定位子組件的實現(xiàn)。和使用過多的全局變量一樣，這可能會影響應(yīng)用長期的可維護性。
局部注冊(常用)
局部注冊的組件需要在使用它的父組件中顯式導入，并且只能在該父組件中使用。它的優(yōu)點是使組件之間的依賴關(guān)系更加明確，并且對 tree-shaking 更加友好。
在使用 <script setup> 的單文件組件中，導入的組件可以直接在模板中使用，無需注冊
<script setup>
import ComponentA from './ComponentA.vue'
</script>
<template>
<ComponentA />
</template>
如果沒有使用 <script setup>，則需要使用 components 選項來顯式注冊：
import ComponentA from './ComponentA.js'
export default {
components: {
ComponentA
},
setup() {
// ...
}
}
請注意：局部注冊的組件在后代組件中并不可用。文章來源：http://www.zghlxwxcb.cn/news/detail-802615.html
組件名格式
- 在整個指引中，我們都使用 PascalCase 作為組件名的注冊格式，這是因為：
PascalCase 是合法的 JavaScript 標識符。這使得在 JavaScript 中導入和注冊組件都很容易，同時 IDE 也能提供較好的自動補全。 -
<PascalCase />在模板中更明顯地表明了這是一個 Vue 組件，而不是原生 HTML 元素。同時也能夠?qū)?Vue 組件和自定義元素 (web components) 區(qū)分開來
在單文件組件和內(nèi)聯(lián)字符串模板中，我們都推薦這樣做。但是，PascalCase 的標簽名在 DOM 內(nèi)模板中是不可用的。
為了方便，Vue 支持將模板中使用 kebab-case 的標簽解析為使用 PascalCase 注冊的組件。這意味著一個以 MyComponent 為名注冊的組件，在模板中可以通過 <MyComponent> 或 <my-component> 引用。這讓我們能夠使用同樣的 JavaScript 組件注冊代碼來配合不同來源的模板。文章來源地址http://www.zghlxwxcb.cn/news/detail-802615.html
到了這里，關(guān)于vue3深入組件： 組件注冊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
