vue3注册全局组件

注册单个全局组件

一.在main.ts中引入注册为全局组件

1. 在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用
2. 其次调用 component 第一个参数组件名称 第二个参数组件实例

import { createApp } from 'vue'
import App from './App.vue'
import leftVue from './components/left.vue'
createApp(App).component('leftVue',leftVue).mount('#app') 
//.component('leftVue',leftVue)就是注册全局组件 （‘自定义键名’，组件名）

二.页面使用

不需要引入直接使用

  <leftVue></leftVue>

批量注册组件

在日常项目开发中，我们会用到很多组件，一个一个去全局组注册很麻烦，这里就不得不提起批量注册了，具体实现如下

一.在components下创建index.ts/js

import leftVue from './left.vue'
import rightVue from './right.vue' //引入组件

import type { App, Component } from 'vue'
const components:any= {leftVue,rightVue} 

export default {
  install(app: App) {
    Object.keys(components).forEach((key: string) => { 
      app.component(key, components[key])//遍历挂载组件
    })
  },
}

二.在main.ts/js引入挂载

import globalComponent from '@/components/index'
app.use(globalComponent)

三.在页面可以直接使用，不需要引入

  <leftVue></leftVue>
  <rightVue></rightVue>

局部注册

一.引入

在需要用到的页面直接引入

import leftVue from "@/components/left.vue";

二.使用

  <leftVue></leftVue>