| 在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.tsimport Components from 'unplugin-vue-components/vite'export default defineConfig({ plugins: [ Components({ /* options */ }), ],})rollup // rollup.config.jsimport Components from 'unplugin-vue-components/rollup'export default { plugins: [ Components({ /* options */ }), ],}webpack // webpack.config.jsmodule.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组件自动按需引入内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
使用nodejs
基于React |
