vue 按需引入,vue引用自定义组件
刚学vue的时候，有点分不清全局组件和局部组件，不知道什么时候用全局组件，什么时候用局部组件。以下文章主要介绍如何按需自动引入Vue组件的相关信息，有需要的朋友可以参考一下。
目录
全局注册、局部注册、局部自动注册、不同方案的比较、组件名称的引用和汇总在Vue中，我们可以通过全局组件和局部注册来使用组件。
全局注册
通过app.component创建一个全局组件
从“vue”导入{ createApp }
从导入HelloWorld。/components/HelloWorld
const app=createApp({})
//全局注册名为hello-wolrd的组件
app.component(hello-wolrd ，hello world)；
一旦我们全局注册了这个组件，我们就可以在任何地方使用这个组件：hello-wolrd/
值得注意的是，全局注册会让Vue失去TypeScript的支持，Vue 3有一个PR扩展了全局组件的接口。目前Volar已经支持这种用法，我们可以通过在根目录下添加components.d.ts文件来增加对全能办公组件TypeScript的支持。
声明模块“vue”
导出接口全局组件{
HelloWorld:导入的类型(。/src/components/hello world . vue )[ default ]
}
}
局部注册
我们可以直接从文件中使用vue组件，
在单个文件组件(SFC)中
模板
HelloWorld msg=欢迎使用您的Vue.js应用/
/模板
脚本
从导入HelloWorld。/components/HelloWorld.vue
导出默认值{
名称：“应用程序”，
组件：{
编译
}
}
/脚本
在JSX
从导入HelloWolrd。/components/HelloWorld.vue
导出默认值{
名称：项目，
render(){
返回(
HelloWolrd msg=欢迎使用您的Vue.js应用/
)
}
}
注册的组件不能在其他组件中访问，也不能在它的父组件、子组件或中使用，因此您需要在每个使用它的地方重新引入和注册该组件。
从导入HelloWolrd。/components/HelloWorld.vue
但是，这种直接导入组件的方式还有一个优点。如果导入的组件使用typescript，我们可以在没有任何插件的情况下在组件中获得智能提示和类型检查功能。
局部自动注册
可见部分注册的优势很明显，但是我们每次使用的时候都需要反复导入。然而，如果您有许多组件，您的组件注册代码可能看起来相当长。我们可以使用unplugin-vue-components按需自动导入组件。它将按需导入组件，但不再需要导入和组件注册。
插件会自动为使用的组件生成一个components.d.ts，从而获得TypeScript的支持，
安装插件
轻快地
//vite.config.ts
从“unplugin-vue-components/vite”导入组件
导出默认定义配置({
插件：[
组件({ /* options */})，
],
})
卷曲
//rollup.config.js
从“unplugin-vue-components/rollup”导入组件
导出默认值{
插件：[
组件({ /* options */})，
],
}
工具
//网页包.配置. js
模块.导出={
/* .*/
插件：[
require( unplug in-vue-components/web pack )({/* options */})
]
}
然后我们可以照常使用模板中的组件，它会自动执行下面的转换。
模板
差异
Hello world msg= Hello Vue 3.0 Vite /
/div
/模板
脚本
导出默认值{
名称：“应用程序”
}
/脚本
转换为
模板
差异
Hello world msg= Hello Vue 3.0 Vite /
/div
/模板
脚本
从导入HelloWorld。/src/components/HelloWorld.vue
导出默认值{
名称：“应用程序”，
组件：{
编译
}
}
/脚本
默认情况下，它会在src/components目录中找到组件。我们可以通过dirs参数自定义组件目录。其他配置请参考github.com/antfu/unplu…
不同方案对比
全球注册
本地注册
拔下组件插头
类型脚本支持
定义components.d.ts文件
默认支持
自动生成components.d.ts文件
组件范围
大局
部分
部分
施用方式
全球注册后使用
部分注册后使用
添加插件后使用
关于组件名
有两种方法可以定义组件名：
使用烤肉串-案例：
Vue.component(我的组件名称，{ /*.*/})
当用烤串盒定义组件时(短破折号分隔命名)，
在引用这个定制元素时，也必须使用kebab-case，比如my-component-name。
使用驼峰命名法的帕斯卡案例
Vue.component(MyComponentName ，{ /*.*/})
当一个组件由PascalCase(用大写字母命名)定义时，
当您引用这个自定义元素时，您可以使用这两种命名方法。
也就是说，my-component-name和MyComponentName都是可以接受的。
注意，尽管如此，只有kebab-case在DOM中直接使用时才有效(即，不是字符串的模板)。
因此，我们通常建议将组件命名为kebab-case。
参考
v3.cn.vuejs.org/guide/compo…
v3.cn.vuejs.org/guide/types…
github.com/antfu/unplu…
总结
这就是这篇关于如何按需自动引入Vue组件的文章。如需更多相关的Vue组件，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。