关于vue.js:vue注册全局组件的方法

首先在src下创立一个baseComponents
而后创立一个index.js在baseComponents
在src/baseComponents/index.js写上面代码

import Vue from 'vue';

// 获取指定目录下的所有组件文件
const components = require.context('./', false, /\.vue$/);

// 遍历组件文件
export default Vue => {
  components.keys().forEach(fileName => {
    // 提取组件名
    const componentName = fileName.replace(/^\.\//, '').replace(/\.\w+$/, '');

    // 获取组件选项对象
    const componentConfig = components(fileName);

    // 全局注册组件
    Vue.component(componentName, componentConfig.default || componentConfig);
  });

}

还要去src/main.js文件写上

import baseComponents from "./baseComponents";
// 注册全局组件
Vue.use(baseComponents);

接下来你就能够在src/baseComponents的文件夹外面减少你想要组件了。
比方src/baseComponents/background.vue
而后在你须要用的中央间接用<background/>就能够应用了

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理