Vue組件如何自動按需引入詳析
在Vue中我們可以通過全局組件、局部註冊的方式來使用組件
全局註冊
通過app.component來創建全局組件
import { createApp } from 'vue' import HelloWorld from './components/HelloWorld' const app = createApp({}) // 全局註冊一個名為hello-wolrd的組件 app.component('hello-wolrd', HelloWorld);
一旦我們全局註冊瞭組件,我們就可以在任何地方使用這個組件:<hello-wolrd/>
值得註意的是全局註冊會使Vue失去TypeScript的支持, Vue 3 有一個 PR 擴展瞭全局組件的接口。目前,Volar 已經支持這種用法,我們可以通過在根目錄添加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,我們無需任何插件就可以在組件中獲得智能提示和類型檢查的功能
局部自動註冊
可以看到局部註冊的優點是比較明顯的,但是每次使用我們都需要重復導入,但是如果你的組件很多,你的組件註冊代碼看起來可能比較冗長,我們可以使用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 */ }) ] }
然後我們可以像往常一樣在模板中使用組件,它會自動進行下面的轉換
<template> <div> <HelloWorld msg="Hello Vue 3.0 + Vite" /> </div> </template> <script> export default { name: 'App' } </script>
轉換成
<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參數來自定義組件目錄,其他配置參考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這種命名方式。
參考
v3.cn.vuejs.org/guide/compo…
v3.cn.vuejs.org/guide/types…
github.com/antfu/unplu…
總結
到此這篇關於Vue組件如何自動按需引入的文章就介紹到這瞭,更多相關Vue組件自動按需引入內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3 組件與API直接使用的方法詳解(無需import)
- Vite創建Vue3項目及Vue3使用jsx詳解
- element-plus的自動導入和按需導入方式詳解
- Vue3自動引入組件與組件庫的方法實例
- element-plus中如何實現按需導入與全局導入