方法一:
main.js引入
// 引入所需的组件
import Footer from './components/Footer.vue'
import Test from './components/Test.vue'
// 调用app实例的component()方法,在全局链式注册组件
app.component('Footer', Footer).component('Test', Test)
方式二:
在src
目录下的components
里新建index.js
,以后引入的组件只需在index.js中引入即可
import Footer from './Footer.vue'
import Test from './Test.vue'
const Components = {
Footer: Footer,
Test
};
// for in 方法
export const registerComponents = (app) => {
for (let item in Components) {
console.log(item)
app.component(item, Components[item])
}
}
// Object.keys() 方法
// Object.keys()会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
export const registerComponents = (app) => {
Object.keys(Components).forEach((key) => {
app.component(key, Components[key]);
});
};
main.js引入
import { registerComponents } from './components'
registerComponents(app);