vue3全局注册组件

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

vue3全局注册组件

我们在封装组件的时候一般情况下都是在components文件夹下写自己的组件,然后再views下写对应的页面然后引入自己封装的组件,比如这样:

vue3全局组件注册,vue的那些事,vue.js,javascript,前端
views下的chooseArea的index.vue想要引入components下的chooseArea->src->index.vue就得这样写:
vue3全局组件注册,vue的那些事,vue.js,javascript,前端

这只是个引入组件的例子,也就是说每当我们在页面中要用的components下的组件时都得import导入一下,那么有么有什么办法可以不在页面中引入,就可以直接在页面中使用我们的组件呢,比如这样:

vue3全局组件注册,vue的那些事,vue.js,javascript,前端

方法就是全局注册组件,具体如何操作请看下文

首先我们得在每个components对应的组件下新建一个Index.ts的文件,在里面把当前的组件install暴露给vue,可以让我们的组件以use的形式使用具体如下:

vue3全局组件注册,vue的那些事,vue.js,javascript,前端

然后在components文件夹下新建一个index.ts注册我们所有的组件如下:

vue3全局组件注册,vue的那些事,vue.js,javascript,前端
然后去main.ts全局注册就可以了

vue3全局组件注册,vue的那些事,vue.js,javascript,前端

对应的代码如下:

components/chooseArea/index.ts

import { App } from 'vue'
import chooseArea from './src/index.vue'

// 让这个组件可以通过use的形式使用
export default {
  install(app: App) {
    app.component('m-choose-area', chooseArea)
  }
}

components/index.ts

import { App } from 'vue'
import chooseArea from './chooseArea'
import chooseIcon from './chooseIcon'

const components = [
  chooseArea,
  chooseIcon,
]

export default {
  install(app: App) {
    components.map(item => {
      app.use(item)
    })
  }
}

main.ts文章来源地址https://www.toymoban.com/news/detail-519710.html

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'
import { toLine } from './utils'
import mUI from './components'

const app = createApp(App)

// 全局注册图标
for (let i in Icons) {
  // 注册全局组件
  app.component(`el-icon-${toLine(i)}`, (Icons as any)[i])
}

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

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

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

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

相关文章

  • Vue 批量注册全局组件

    在项目开发中,我们经常会封装一些全局组件,然后在入口文件中统一导入,这时就会出现一个问题,如果我封装了很多组件,假如有成百上千的组件,都想注册成全局组件,那岂不是入口文件要引入几千行,显然这样是很笨拙的,所以就出现了 批量注册全局组件。 注: 批

    2024年01月22日
    浏览(44)
  • Vue全局组件和局部组件的注册

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

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

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

    2024年01月18日
    浏览(40)
  • 前端代码审查(Code Review)---具体实践规范会持续更新(新增Vite基础组件全局注册方式)

    针对目录结构、SCSS规范、JS规范、Vue规范 可参照官方给出的风格指南(Code Review) 1、POST/PUT/DELETE 请求按钮需要添加 loading 状态,防止重复提交。 建议使用 Element UI 提供的button 组件的loading属性,或者自己封装一个 loading 状态的按钮组件。 2、模板上超过两个的判断条件,写

    2024年04月17日
    浏览(87)
  • Vue3 - 组件注册

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

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

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

    2024年01月18日
    浏览(47)
  • vue3基础: 组件注册

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

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

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

    2024年01月25日
    浏览(53)
  • 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日
    浏览(64)
  • 记录--封装一个通过js调用的全局vue组件

    在使用vue项目编写的时候,不可避免的会碰到需要时js api来调用组件进行显示的情况 例如饿了么element ui 的 Notification 通知、Message 消息提示等组件 虽然已经提供了,但是由于api的限制,我们只能通过特定的参数来有限的改变组件的样式 之前的文章说过可以使用 new Vue() 、

    2024年02月09日
    浏览(58)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包