詳解Vue的組件注冊
引言
一個 Vue 組件在使用前需要先被“注冊”,這樣 Vue 才能在渲染模板時找到其對應的實現(xiàn)。
組件注冊有兩種方式:全局注冊和局部注冊。
全局注冊?
我們可以使用 Vue 應用實例的 app.component()
方法,讓組件在當前 Vue 應用中全局可用。
import { createApp } from 'vue' const app = createApp({}) app.component( // 注冊的名字 'MyComponent', // 組件的實現(xiàn) { /* ... */ } )
如果使用單文件組件,你可以注冊被導入的 .vue
文件:
import MyComponent from './App.vue' app.component('MyComponent', MyComponent)
app.component()
方法可以被鏈式調用:
app .component('ComponentA', ComponentA) .component('ComponentB', ComponentB) .component('ComponentC', ComponentC)
全局注冊的組件可以在此應用的任意組件的模板中使用:
<!-- 這在當前應用的任意組件中都可用 --> <ComponentA/> <ComponentB/> <ComponentC/>
所有的子組件也可以使用全局注冊的組件,這意味著這三個組件也都可以在彼此內部使用。
局部注冊?
全局注冊雖然很方便,但有以下幾個問題:
- 全局注冊,但并沒有被使用的組件無法在生產打包時被自動移除 (也叫“tree-shaking”)。如果你全局注冊了一個組件,即使它并沒有被實際使用,它仍然會出現(xiàn)在打包后的 JS 文件中。
- 全局注冊在大型項目中使項目的依賴關系變得不那么明確。在父組件中使用子組件時,不太容易定位子組件的實現(xiàn)。和使用過多的全局變量一樣,這可能會影響應用長期的可維護性。
相比之下,局部注冊的組件需要在使用它的父組件中顯式導入,并且只能在該父組件中使用。它的優(yōu)點是使組件之間的依賴關系更加明確,并且對 tree-shaking 更加友好。
局部注冊需要使用 components
選項:
<script> import ComponentA from './ComponentA.vue' export default { components: { ComponentA } } </script> <template> <ComponentA /> </template>
對于每個 components
對象里的屬性,它們的 key 名就是注冊的組件名,而值就是相應組件的實現(xiàn)。上面的例子中使用的是 ES2015 的縮寫語法,等價于:
export default { components: { ComponentA: ComponentA } // ... }
請注意:局部注冊的組件在后代組件中并不可用。在這個例子中,ComponentA
注冊后僅在當前組件可用,而在任何的子組件或更深層的子組件中都不可用。
組件名格式?
在整個指引中,我們都使用 PascalCase 作為組件名的注冊格式,這是因為:
- PascalCase 是合法的 JavaScript 標識符。這使得在 JavaScript 中導入和注冊組件都很容易,同時 IDE 也能提供較好的自動補全。
<PascalCase />
在模板中更明顯地表明了這是一個 Vue 組件,而不是原生 HTML 元素。同時也能夠將 Vue 組件和自定義元素 (web components) 區(qū)分開來。
在單文件組件和內聯(lián)字符串模板中,我們都推薦這樣做。但是,PascalCase 的標簽名在 DOM 模板中是不可用的。
為了方便,Vue 支持將模板中使用 kebab-case 的標簽解析為使用 PascalCase 注冊的組件。這意味著一個以 MyComponent
為名注冊的組件,在模板中可以通過 <MyComponent>
或 <my-component>
引用。這讓我們能夠使用同樣的 JavaScript 組件注冊代碼來配合不同來源的模板。
到此這篇關于詳解Vue的組件注冊的文章就介紹到這了,更多相關Vue組件注冊內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
解決webpack+Vue引入iView找不到字體文件的問題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09何時/使用 Vue3 render 函數(shù)的教程詳解
這篇文章主要介紹了何時/使用 Vue3 render 函數(shù)的教程詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07