Vue組件如何自動按需引入詳析
在Vue中我們可以通過全局組件、局部注冊的方式來使用組件
全局注冊
通過app.component來創(chuàng)建全局組件
import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld'
const app = createApp({})
// 全局注冊一個名為hello-wolrd的組件
app.component('hello-wolrd', HelloWorld);
一旦我們?nèi)肿粤私M件，我們就可以在任何地方使用這個組件：<hello-wolrd/>
值得注意的是全局注冊會使Vue失去TypeScript的支持, Vue 3 有一個 PR 擴展了全局組件的接口。目前，Volar 已經(jīng)支持這種用法，我們可以通過在根目錄添加components.d.ts文件的方式來添加全對局組件的TypeScript的支持
declare module 'vue' {
export interface GlobalComponents {
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
}
}
局部注冊
我們可以直接從文件中引入vue組件使用，
在單文件組件中（SFC）
<template>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
在JSX中
import HelloWolrd from './components/HelloWorld.vue'
export default {
name: "item",
render(){
return (
<HelloWolrd msg="Welcome to Your Vue.js App"/>
)
}
}
局部注冊的組件在其他組件中無法訪問，在其父組件或子組件或中均不可用，所以你需要在每個使用該組件的地方重新引入并注冊該組件
import HelloWolrd from './components/HelloWorld.vue'
但是這種直接導入組件的方式還有一個好處，如果我們導入的組件使用了typescript，我們無需任何插件就可以在組件中獲得智能提示和類型檢查的功能
局部自動注冊
可以看到局部注冊的優(yōu)點是比較明顯的，但是每次使用我們都需要重復導入，但是如果你的組件很多，你的組件注冊代碼看起來可能比較冗長，我們可以使用unplugin-vue-components，自動按需導入組件. 它會按需導入組件，但是不再需要導入和組件注冊
該插件會自動對使用的組件生成一個components.d.ts從而獲得TypeScript的支持,
安裝插件
vite
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({ /* options */ }),
],
})
rollup
// rollup.config.js
import Components from 'unplugin-vue-components/rollup'
export default {
plugins: [
Components({ /* options */ }),
],
}
webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-vue-components/webpack')({ /* options */ })
]
}
然后我們可以像往常一樣在模板中使用組件，它會自動進行下面的轉(zhuǎn)換
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
轉(zhuǎn)換成
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
import HelloWorld from './src/components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
默認它會在src/components目錄下查找組件，我們可以通過dirs參數(shù)來自定義組件目錄，其他配置參考github.com/antfu/unplu…
不同方案對比
| 全局注冊 | 局部注冊 | unplugin-vue-components | |
|---|---|---|---|
| TypeScript支持 | 定義components.d.ts文件 | 默認支持 | 自動生成components.d.ts文件 |
| 組件作用域 | 全局 | 局部 | 局部 |
| 使用方法 | 全局注冊后使用 | 局部注冊后使用 | 添加插件后使用 |
關于組件名
定義組件名的方式有兩種：
使用 kebab-case：
Vue.component('my-component-name', { /* ... */ })
當使用 kebab-case (短橫線分隔命名)定義一個組件時，
你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component-name>。
使用 駝峰命名法PascalCase
Vue.component('MyComponentName', { /* ... */ })
當使用 PascalCase (首字母大寫命名) 定義一個組件時，
你在引用這個自定義元素時兩種命名法都可以使用。
也就是說 <my-component-name> 和 <MyComponentName>都是可接受的。
注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。
所以我們一般建議組件都采用kebab-case這種命名方式。
參考
總結
到此這篇關于Vue組件如何自動按需引入的文章就介紹到這了,更多相關Vue組件自動按需引入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Vue中自定義指令directive的使用方法，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-04-04
Vue3+vite實現(xiàn)使用svg可改變顏色的全過程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標庫、自定義組件以及通過插件簡化項目構建過程,這篇文章給大家介紹了Vue3+vite實現(xiàn)使用svg可改變顏色的全過程,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue3中如何檢測數(shù)組的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
今天小編就為大家分享一篇vue 刷新之后 嵌套路由不變 重新渲染頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3使用reactive包裹數(shù)組正確賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了在 React、Vue項目中使用SVG的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
在vue.js渲染完界面之后如何再調(diào)用函數(shù)
這篇文章主要介紹了在vue.js渲染完界面之后如何再調(diào)用函數(shù)的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue 頁面監(jiān)聽用戶預覽時間功能的實現(xiàn)代碼
這篇文章主要介紹了Vue 頁面如何監(jiān)聽用戶預覽時間,首先需要借助vue頁面的生命周期函數(shù)mounted和destroyed，分別加入開始計時和清除計時的邏輯，通過相關操作實現(xiàn)此功能，需要的朋友可以參考下2021-07-07
Vue+Bootstrap實現(xiàn)簡易學生管理系統(tǒng)
這篇文章主要為大家詳細介紹了Vue+Bootstrap實現(xiàn)簡易學生管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
本篇文章主要介紹了vue頁面使用阿里oss上傳功能的實例（一），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08