Vue中全局组件的注册
我们经常会在利用Vue开发的项目中,多次重复使用某一段代码结构,这就需要我们把它封装成公共组件,注册在全局进行多次复用。
Vue 官方提供的常规方法
- 在Vue项目中
src/components
路径下补充创建文件夹名(xxx)/ index.vue
,在此vue组件中写入自己需要服用多次的代码结构 - 在
src/main.js
文件中
import Vue from 'vue'
// 引入封装的复用的组件 注意xxx组件名应采用大驼峰命名法,例如:PageTool
import xxx from '@/components/文件夹名(xxx)'
Vue.component('xxx',xxx) // 在全局用Vueponent()方法全局注册
- 在需要此组件的另一组件中直接嵌套使用即可
<template>
<div>
<!-- 直接使用即可 -->
<xxx />
</div>
</template>
然而,以上方法只适用于整个项目中需要复用封装的组件较少的情况下,当组件数量变得多时,main.js
文件中的代码结构就显得冗余,很难管理,因此当复用组件较多时我更推荐采用下面这种帆方法。
Vue.use( ) 方法注册
Vue.use( ) 它是Vue提供一个静态方法,用来向Vue注册插件(增强vue的功能)。
参考文档:Vue.use( )
想必在Vue的项目中的已经见过此方法的使用实例,并不陌生了
Vue.use(VueRouter) // 挂载router路由
Vue.use(Vuex) // 挂载store
Vue.use(vant) // 挂载vant第三方组件库
在使用之前,先来了解一下此方法的基本使用
Vue.use(obj)
说明:
- Vue.use 可以接收一个对象,Vue.use(obj)
- 对象obj中需要提供一个 install 函数
- 在 Vue.use(obj) 时,会自动调用该 install 函数,并传入 Vue构造器(Vue构造函数)
具体使用步骤
- 在Vue项目中
src/components
路径下补充创建文件夹名(xxx)/ index.vue
,在此vue组件中写入自己需要服用多次的代码结构 - 在Vue项目中
src/components
路径下补充创建index.js
文件,代码片段如下
// 引入封装的复用的组件 注意xxx组件名应采用大驼峰命名法,例如:PageTool
// vue2.0
import 组件对象 from './文件夹名(xxx)'
export default {
install(Vue) {
Vue.component('组件对象', 组件对象)
}
}
// vue3.0
import 组件对象 from './文件夹名(xxx)'
export default {
install(app) {
app.component('组件对象', 组件对象)
}
}
// 批量导入全局注册(组件过多时)
// 导入存放需要全局注册的组件所在的文件夹内的所有.vue文件
// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数:1. 目录(文件夹所在位置) 2. 是否加载子目录true/false 3. 加载的正则匹配(以.vue为结尾的文件)
const importFn = require.context('./', false, /\.vue$/)
// console.dir(importFn.keys()) 文件名称数组
export default {
install(app) {
// 批量注册全局组件
importFn.keys().forEach(key => {
// 导入组件
const component = importFn(key).default
// 注册组件
app.component(component.name, component)
})
}
}
/* 当有多个因需要复用而封装的组件时,全部可以导入在此文件中,并进行Vueponent()注册,而不再需要操作main.js 文件,方便管理 */
总结:
- require.context() 是webpack提供的一个自动导入的API
- 参数1:加载的文件目录
- 参数2:是否加载子目录
- 参数3:正则,匹配文件
- 返回值:导入函数 fn
- keys() 获取读取到的所有文件列表
- 在
main.js
文件中,代码片段如下
// Components 为上面在 index.js 文件中默认导出的对象
// vue2.0
import Components from './components/index.js'
Vue.use(Components) // 全局注册使用
// vue3.0
import { createApp } from 'vue'
import Components from './components/index.js'
createApp(App).use(store).use(router).use(Components).mount('#app')// 全局注册使用
- 在需要此组件的另一组件中直接嵌套使用即可
<template>
<div>
<!-- 直接使用即可 -->
<组件对象名 />
</div>
</template>
更多推荐
Vue3/Vue2中全局组件的注册使用
发布评论