前言
有时候我们自己封装的自定义组件需要在很多页面中需要用到,每次都需要导入组件、注册组件、使用组件就会增加许多重复的代码,我们也可以像使用类似于使用ElementUI组件库一样,在全局注册我们封装的自定义组件
一、原理
通过Vue.use()方法注册全局组件时,会默认调用传入组件的install方法,在install方法的参数中可以拿到Vue实例
二、注册步骤
1.创建index.js文件
导入需要注册的自定义组件,默认导出包含install方法的对象,在install方法中注册组件:
// 负责所以自定义组件的全局注册
import PageTools from './PageTools'
export default {
install(Vue) {
Vue.component('PageTools', PageTools)
}
}
2.全局引入自定义组件
import Component from './components'
Vue.use(Component)
3.直接使用组件
<page-tools :show-before="true">
<template #before>
首页信息
</template>
</page-tools>