Vue.use()和Vue.component()

bidepanm2024-12-27 20:13

当很多页面用到同一个组件，又不想每次都在局部注册时，可以在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;