vue3中批量全局注册组件

这篇具有很好参考价值的文章主要介绍了vue3中批量全局注册组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue3中批量全局祖册组件

学习的时候顺便记录一下,用于个人学习使用vite+vue3+ts,如果想直接看批量注册全局组件的,看文章目录,直接点目录跳转即可

在vue中,我们在main.ts引入的全局注册的组件是可以不需要import导入而直接使用的。使用的时候是自己全局注册组件时的名称,而不是组件名。如下图所示的Helloword,而不是HelloWorldVue那个,具体看下图所示就可以了

vue3注册全局组件,Vue,javascript,vue.js,前端
vue3注册全局组件,Vue,javascript,vue.js,前端

除了在main.ts中直接写引入组件之外,我们还可以通过自己写一个ts文件,然后在main.ts引用它,来达到全局注册组件的目的。如下所示

vue3注册全局组件,Vue,javascript,vue.js,前端

index.js的代码如下所示

import {App} from 'vue'
import HomeVue from './Home.vue';
export default {
  install(app: App) {
    app.component("Home", HomeVue);
  }
}

main.ts中的代码如下

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

// 全局注册组件
import HelloWorldVue from './components/HelloWorld.vue'
// 引入ts文件对应的全局注册的组件的配置
import components  from './components/index'

const app = createApp(App)

// 全局注册组件
app.component("Helloword",HelloWorldVue)

// 对ts文件中的全局组件进行配置
app.use(components)

app.use(ElementPlus).mount('#app')

结果如下图所示

vue3注册全局组件,Vue,javascript,vue.js,前端

批量注册全局组件

通过循环就可以批量注册全局组件了,如下图所示

vue3注册全局组件,Vue,javascript,vue.js,前端

myComponents.ts的代码如下

import {App} from 'vue'
import HomeVue from './Home.vue';
import HelloWorldVue from './HelloWorld.vue';

/** 
export default {
  install(app: App) {
    app.component("Home", HomeVue);
    app.component("Helloword", HelloWorldVue)
  }
}

*/
const components = [
  {title: 'Home', componentName: HomeVue},
  {title: 'Helloword', componentName: HelloWorldVue}
]

export default {
  install(app: App) {
    components.forEach(item => {
      // 通过循环遍历数据批量注册组件
      app.component(item.title, item.componentName)
    })
  }
}

main.ts的代码如下:

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

// 引入ts文件对应的全局注册的组件的配置
import components  from './components/myComponents'

const app = createApp(App)

// 对ts文件中的全局组件进行配置
app.use(components)

app.use(ElementPlus).mount('#app')

App.vue如下

<script setup lang="ts">

</script>

<template>
  <div id="app">
    <Helloword></Helloword>
    <hr>
    <Home></Home>
  </div>
</template>

<style scoped>

</style>

结果如下图所示

vue3注册全局组件,Vue,javascript,vue.js,前端

vite查找.vue 结尾的文件

但是这里还是需要我们自己手写一个一个引入组件,然后实现批量导入,那么有没有一种办法就是。我读取某一个目录下中以(点).vue结尾的文件,然后将其注册为全局组件。这样就可以不用一个一个手动import导入了。我们可以利用功能 | Vite 官方中文文档 (vitejs.dev)中提供的import.meta.glob找到以(点).vue结尾的文件以及相关的信息,import.meta.glob的通配符是* 或者是 **,也可以使用!进行反选操作。

这里的./表示当前使用了import.meta.glob的ts文件所在的目录,具体看下面的截图说明即可

import.meta.glob("./path/**/*.vue") 如这里:查找当前目录下的path目录下和(path目录下的子目录中的)以(点).vue结尾的文件

import.meta.glob("./path/*.vue")如这里:查找当前目录下的path目录下的以(点).vue结尾的文件,不包括子目录中的文件

如下图所示,这里注意看下图中myComponents.ts文件所在的位置,以及对应的目录位置,我们要找的是使用了import.meta.glob(“./path/*.vue”)的ts文件对应需要扫描的文件夹的位置。具体看下图就知道了

vue3注册全局组件,Vue,javascript,vue.js,前端

console.log的结果如下所示,可以结合图中所示的目录看一下

vue3注册全局组件,Vue,javascript,vue.js,前端

如果去掉**号,那就只是找当前目录下的以.vue结尾的文件,如下图所示

vue3注册全局组件,Vue,javascript,vue.js,前端

console.log()的结果如下所示,可以结合图中所示的目录看一下

vue3注册全局组件,Vue,javascript,vue.js,前端

如:我将myComponents.ts换一个位置,我们只需要找到对应的位置需要扫描的文件路径即可,如下图所示

vue3注册全局组件,Vue,javascript,vue.js,前端

console.log()的结果如下,可以找到对应的以点.vue结尾的文件

vue3注册全局组件,Vue,javascript,vue.js,前端

通过 import.meta.glob("./path/**/*.vue") 的形式批量注册全局组件

注意:这里我将myComponents.ts重新放到了components目录下了

vue3注册全局组件,Vue,javascript,vue.js,前端

console.log()打印的结果如下

vue3注册全局组件,Vue,javascript,vue.js,前端

所以上面就相当于如果是aaa.vue组件,则就是类似于app.component(“aaa”(这个全局注册的名称), aaa(这个是组件))即app.component(“aaa”,aaa)。只不过这里是动态引入而已,他们的调用关系截图如下所示,截图的代码在后面

vue3注册全局组件,Vue,javascript,vue.js,前端

vue3注册全局组件,Vue,javascript,vue.js,前端

myComponents.ts的代码如下

import {App} from 'vue'
import { defineAsyncComponent,AsyncComponentLoader } from "vue";

const componentss = import.meta.glob("./**/*.vue");
console.log(componentss)
console.log(Object.entries(componentss))

/**
 * 全局组件引用管理
 */
export default {
  install(app: App) {
    for (let [key, value] of Object.entries(componentss)) {
      
      // 字符串截取,具体看下面console.log()中的name就知道了
      let name = key.slice(key.lastIndexOf("/") + 1, key.lastIndexOf("."));
      console.log(`注意这里的name名称=》》            ${name}       ===>这个名称,
      自己作为了全局祖册组件的名称了,也就是如左侧目录的:aaa.vue去掉.vue就剩下aaa了
      ,然后那这个名称作为组件引用的名称,具体看截图就知道了。这时就是相当于跟左侧
      项目目录的.vue结尾的文件去掉.vue得到的名称`)
      app.component(name, defineAsyncComponent(value as AsyncComponentLoader));
    }      
  }
}

main.ts代码如下

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

// 引入ts文件对应的全局注册的组件的配置
import components  from './components/myComponents'

const app = createApp(App)

// 对ts文件中的全局组件进行配置
app.use(components)

app.use(ElementPlus).mount('#app')

App.vue

<script setup lang="ts">

</script>

<template>
  <div id="app">
    <HelloWorld></HelloWorld>
    <hr>
    <Home></Home>
    <hr>
    <aaa></aaa>
    <hr>
    <bbb></bbb>
  </div>
</template>

<style scoped>

</style>

结果如下所示

vue3注册全局组件,Vue,javascript,vue.js,前端

这时我在components目录下新建一个ccc.vue文件,只要我新建的组件,直接写标签就行了,不再需要手动import引入了。如下图所示

vue3注册全局组件,Vue,javascript,vue.js,前端

结果如下图所示
vue3注册全局组件,Vue,javascript,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-756964.html

到了这里,关于vue3中批量全局注册组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app:vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后,会发现在微信小程序开发中全局注册的组件是无法显示的,这是uniapp的一个未解决bug, 在uniapp中出了可以通过vue实例的component方法注册全局组件外,uniapp支持另一种全局注册的方式,就是通过 easycom 扫描注册,步骤如下 easycom 的扫描流程是:通过代码

    2024年02月16日
    浏览(91)
  • Vue全局组件和局部组件的注册

      组件的简介 : 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 组件的基本使用: 创建一个Vue实例需要创建后才能使用,组件也需要进行注册后才能使用。注册

    2023年04月23日
    浏览(46)
  • vue3深入组件: 组件注册

    一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册。 全局注册 我们可以使用 Vue 应用实例的 .component() 方法,让组件在当前 Vue 应用中全局可用。 全局注册的问题: 全局注册,但并没有被使用

    2024年01月18日
    浏览(40)
  • Vue3 - 组件注册

    组件的注册 组件注册分为全局注册为和局部注册 全局注册 全局注册就是通过app.component(\\\'组件名\\\', 组件实例) 通过app.component()全局注册还可以进行链式调用进行多组件注册,如下: 全局注册之后再该应用下的任意组件模板中都可以使用,无需再单独注册 局部注册 在单个组件

    2024年02月04日
    浏览(35)
  • vue3基础: 组件注册

    组件注册 一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册。 全局注册 我们可以使用 Vue 应用实例的.component()方法,让组件在当前 Vue 应用中全局可用。 全局注册的问题: 全局注册,但并没有

    2024年02月02日
    浏览(73)
  • 两周掌握Vue3(三):全局组件、局部组件、Props

    代码仓库:跳转 本博客对应分支:03 Vue 3 中的全局组件是在应用程序中全局注册的组件,可以在任何地方使用,而不需要在每个组件中都单独注册。 在components目录下创建全局组件MyGlobalComponent.vue: 在App.vue中尝试使用我们定义和注册的全局组件: 效果: 在 Vue 3 中,局部组

    2024年01月18日
    浏览(47)
  • uniapp引入全局js,vue2/vue3不同方式引入

    Hi I’m Shendi uniapp引入全局js,vue2/vue3不同方式引入 最近写小程序,个人开发,选用了 uni-app 进行开发 选用的 vue3 版本 因为我用的 vue3 版本,在这里踩了没学过vue3的坑,用vue2引入全局js的方式使用,导致undefined… Vue2 版引入全局js的方法如下 将js放到项目内,一般放到自建的

    2024年02月03日
    浏览(57)
  • vue3-深入组件-组件注册和props更多细节

    定义好的组件需要注册才能被使用。 注册方式有两种 全局注册 局部注册 全局注册 .component() 方法,让组件在当前 Vue 应用中全局可用。 在 main.ts 中 在 vue 中直接使用无需导入 效果: 全局注册的组件可以在此应用的任意组件的模板中使用,所有的子组件也可以使用全局注册

    2024年01月25日
    浏览(51)
  • elementPlus——图标引入+批量注册全局组件——基础积累

    因为我们要根据路由配置对应的图标,也要为了后续方便更改。因此我们将所有的图标注册为全局组件。(使用之前将分页器以及矢量图注册全局组件的自定义插件)(所有图标全局注册的方法element-plus文档中已给出) 经过上面的步骤,就可以把 elementPlus 自带的 icon 图标全

    2024年02月12日
    浏览(27)
  • 【Vue.js】Vue3全局配置Axios并解决跨域请求问题

    对于前后端分离项目,前端和后端端口不能重复,否则会导致前端或者后端服务起不来。例如前端访问地址为: http://localhost:8080/ ,后端访问地址为 http://localhost:8081/ 。后端写好Controller,当用Axios访问该接口时,将会报错: Access to XMLHttpRequest at \\\' http://localhost:8081/login \\\' from

    2024年02月05日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包