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

5次阅读

共计 650 个字符,预计需要花费 2 分钟才能阅读完成。

首先在 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/> 就能够应用了

正文完
 0