注册单个全局组件
一.在main.ts中引入注册为全局组件
- 在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用
- 其次调用 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>