Vue.use()和Vue.component()

当很多页面用到同一个组件,又不想每次都在局部注册时,可以在main.js 中全局注册

Vue.component()一次只能注册一个组件

javascript 复制代码
import CcInput from '@/components/cc-input.vue'
Vue.component(CcInput);

Vue.use()一次可以注册多个组件

对于自定义的组件,如果不想在每个页面都引入一次,可以使用Vue.use()方法进行注册。

注册插件的时候,需要在调用 new Vue() 启动应用之前完成

Vue.use会自动阻止多次注册相同插件,只会注册一次

假设有两个自定义的组件:cc-input, cc-button

myUI/components中定义组件

在main.js中:

javascript 复制代码
import MyUI from '/myUi';
Vue.use(MyUi);

myUi/index.js:

javascript 复制代码
import CcInput from './components/cc-input';
import CcButton from './components/cc-button';

const components = [
	CcInput,
	CcButton
]

const MyUI = {
	install(Vue) {
		components.forEach(component => {
			// 注册组件
			Vue.component(component.name, component);
		});
	}
}

export default MyUI;
相关推荐
Amy.Wang几秒前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼3 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿5 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再7 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55511 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录16 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000017 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl18 分钟前
深度剖析Kafka读写机制
前端
FogLetter19 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css