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组件自动按需引入内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7046296119499816990
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25