Vue3中注册全局的组件,并在TS中添加全局组件提示方式

目录
  • Vue3中注册全局的组件
  • Vue3踩坑--全局注册组件
    • 我的框架:vue3+vite+ts+naiveUI

Vue3中注册全局的组件

1. 在src/components中新建index.ts用来将所有需要全局注册的组件导入

: 如果使用的是 JS 可以删除类型校验

import type { Component } from 'vue'
import SvgIcon from './SvgIcon/index.vue'

// 如果使用的是 JS 可以删除类型校验
const components: {
  [propName: string]: Component
} = {
  SvgIcon
}
export default components

2. 在main.ts中导入

这里使用循环的方式, 将每个全局组件进行注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 基于断点的隐藏类 Element 额外提供了一系列类名,用于在某些条件下隐藏元素
import App from './App.vue'
import router from './router'
import { store, key } from './store'

import globalComponent from '@/components/index'

const app = createApp(App)

app.use(store, key).use(router).use(ElementPlus).mount('#app')

// 注册全局的组件
for (const componentItme in globalComponent) {
  app.component(componentItme, globalComponent[componentItme])
}

3. 如果使用TS编写,还需要在和main.ts同级的目录, 创建一个components.d.ts, 用来处理组件引入报错的问题和添加组件提示

import SvgIcon from '@/components/SvgIcon/index.vue'
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    SvgIcon: typeof SvgIcon
  }
}

4. 最后直接导入即可

Vue3踩坑--全局注册组件

我的框架:vue3+vite+ts+naiveUI

步骤一:

创建一个loading文件夹

index.vue

index.ts

//loading/index.vue
<script lang="ts">
import { NSpace, NSpin } from 'naive-ui'
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'HsNavLoading',
  components: {
    NSpace,
    NSpin
  }
})
//loading/index.ts
import { App } from 'vue'
import loading from './index.vue'

export default {
  install(app: App) {
    app.component(loading.name, loading)
  }
}

步骤二:

components文件夹下创建index.ts一次引入多个全局组件并导出

//components/index.ts
import { App } from 'vue'
import loading from '@/components/Loading/index'

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

步骤三:

main.js引入

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import components from '@/components/index'
const app = createApp(App)
app.use(router).mount('#app')
app.use(components)

步骤四:

在单页面中使用

<hsNavLoading :show="isLoading" />

遇到的坑:

一开始loading/index.vue使用setup语法糖,通过 defineExpose 来导出name

报错

Failed to resolve component: hsNavLoading If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

<script lang="ts" setup>
import { NSpace, NSpin } from 'naive-ui'
defineExpose({
   name: 'HsNavLoading'
})

</script>

解决办法:如步骤一,把语法糖换掉

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • VUE注册全局组件和局部组件过程解析

    这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users'

  • vue实现全局组件自动注册,无需再单独引用

    目录 vue全局组件自动注册 自动化注册全局组件脚本 vue全局组件自动注册 1.在components目录下创建一个global目录,里面放置一些需要全局注册的组件. index.js作用只要是引入main.vue,导出组件对象 2.在components中创建一个index.js,用来扫描全局对象并自动注册. 3.最后在入口文件main.js中导入这个index.js中就可以了 4.直接使用 自动化注册全局组件脚本 今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js

  • 一起来做一下Vue全局提示组件

    全局提示组件在前端中算是比较重要的,在开发业务时候肯定能用的上,毕竟任何报错只要提示“服务器异常”就可以完美把锅扔给后台(手动滑稽) 全局提示组件在人气比较的 UI 组件库必有他身影,可能叫法不太相同,有叫 message.toast.alert 等,但就是这么一玩意. 拿 ant-design-vue 组件库为例 其核心代码 message.info('This is a normal message') 他是API的方式进行调用组件,以平常使用components注册组件,之后在templa

  • 最简单的vue消息提示全局组件的方法

    简介 实现功能 自定义文本 自定义类型(默认,消息,成功,警告,危险) 自定义过渡时间 使用vue-cli3.0生成项目 toast全局组件编写 /src/toast/toast.vue <template> <div class="app-toast" v-if="isShow" :class="{'info': type=== 'info','success': type=== 'success','wraning': type===

  • Vue3中注册全局的组件,并在TS中添加全局组件提示方式

    目录 Vue3中注册全局的组件 Vue3踩坑--全局注册组件 我的框架:vue3+vite+ts+naiveUI Vue3中注册全局的组件 1. 在src/components中新建index.ts用来将所有需要全局注册的组件导入 : 如果使用的是 JS 可以删除类型校验 import type { Component } from 'vue' import SvgIcon from './SvgIcon/index.vue' // 如果使用的是 JS 可以删除类型校验 const compon

  • vue3使用vue-i18n的方法详解(ts中使用$t, vue3不用this)

    vue项目里多语言工具一直用的vue-i18n. 以前用的 vue2,也没啥大问题,就是配置好之后用t(“你的属性名”)就行,现在用vue3其实本来也没太大变化. 但是配置完之后,在html中用$t()没有问题,显示文案什么的一切正常.而在ts中使用$t()方法报错,后来才发现是我没有设置全局的$t()方法. 记录一下在vue3中使用vue-i18n的方法: 安装vue-18n 配置 应用 挂载全局方法$t以方便在ts中使用(本次记录的重点) 由于1.2.3.好多人写过了,我就简单的写一下,本次

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

  • vue中注册自定义的全局js方法

    前端开发的时候,总会需要写一些js方法,在vue框架中为了方便使用,可以考虑注册一个全局的js方法,下面是注册步骤: 1.0 可以在assets文件中的js文件下面新建一个js文件,如:yun.js--- 2.0 在yun.js 上面实现日期格式方法,如下 import Vue from 'vue' const format = (o, format) => { //日期类型 let args = { "M+": o.getMonth() + 1, "d+":

  • 在Winform和WPF中注册全局快捷键实现思路及代码

    快捷键辅助类 复制代码 代码如下: class HotKey { /// <summary> /// 如果函数执行成功,返回值不为0. /// 如果函数执行失败,返回值为0.要得到扩展错误信息,调用GetLastError..NET方法:Marshal.GetLastWin32Error() /// </summary> /// <param name="hWnd">要定义热键的窗口的句柄</param> /// <param na

  • Android组件TabHost实现页面中多个选项卡切换效果

    TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计. 一.基础知识 TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡; TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中; -- 创建选项卡 : newTabSpec(String tag), 创建一个选项卡; -- 添加选项卡 : addTab(tabSpec); 二.实例讲解 TabHost的基本使用,主要是layout的

  • Vue3+TS实现语音播放组件的示例代码

    目录 第一步:点击拖拽进度条 第二步:操作媒体音频 第三步:进度条和播放进度关联 完整代码 该功能将使用vue3 + TS来实现语音播放组件,使用什么技术不重要,重要的是看懂了核心逻辑后,通过原生js.react.vue2等都可以轻松实现 所涉及到重要点有以下几个: (1)进度条的实现:拖拽进度条.点击进度条 (2)操作audio语音播放:通过js操作audio媒体 (3)播放进度与进度条紧密关联:播放的进度改变时,进度条也随之改变:进度条改变时,播放的进度也随之改变 效果图: 开始我们的设计吧

  • 在Vue中实现添加全局store

    目录 Vue添加全局store 在命令行中输入安装 在main.js文件中引用 在src中创建一个page文件 在src下创建一个store文件 store使用方法讲解 vuex 包含有五个基本的对象 vuex,module间的方法调用 vue文件调用store的action方法 Vue添加全局store 在命令行中输入安装 npm install --save vuex 在main.js文件中引用 store和在new Vue中声明store import store from './stor

  • Vue中一个组件调用其他组件的方法详解(非父子组件)

    目录 前言 方式一:引用式 方式二:vuex 1.src/store/index.js 2.被使用组件- A 页面(组件) 3.使用触发页面-B 页面(组件) 方式三:使用事件总线eventBus定义全局事件 1.src/main.js 2.触发页面-B组件/发布事件 3.接收页面-A组件/订阅事件 4.移除事件 总结 前言 Vue中,一个组件调用其他组件的方法(非父子组件) 场景——B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式

  • Yii2中添加全局函数的方法分析

    本文实例讲述了Yii2中添加全局函数的方法.分享给大家供大家参考,具体如下: 方法一 这种方法就是直接在入口文件web/index.php里面写函数,示例代码如下: // something code -- // 全局函数 function pr($var) { $template = php_sapi_name() !== 'cli' ? '<pre>%s</pre>' : "\n%s\n"; printf($template, print_r($var, t

随机推荐