欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

组件:组件、方法和指令导出

程序员文章站 2022-06-15 19:11:35
一、导出index.js 文件/** * 解析模块 * @param {*} path 文件路径 * @param {*} regFile 文件名正则 * @param type 模块类型,component 组件,function 方法,directive 指令 */const exportModule = (modulesList, type) => { // 获取模块对象列表 let modules = modulesList.keys().reduce(...

目录

一、导出

二、使用

1、全局引入

2、局部引入


一、导出

index.js 文件

/**
 * 解析模块
 * @param modulesList  模块对象列表
 * @param type 模块类型,component 组件,function 方法,directive 指令
 */
const exportModule = (modulesList, type) => {
    // 获取模块对象列表
    let modules = modulesList.keys().reduce((obj, modulePath) => {
        // 模块名
        let moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
        // 模块对象
        let moduleObj = modulesList(modulePath);
        // 放入模块
        obj[moduleName] = moduleObj.default;
        // 组件的单个导出
        if(type === 'component') {
            Object.assign(exports, { [moduleName]: moduleObj.default });
        }
        return obj;
    }, {});
    // 要导出的
    let exportModules;
    switch (type) {
        case 'component': {
            // 全局引入
            exportModules = function (Vue, opts = {}) {
                for (let i in modules) {
                    Vue.component(i, modules[i]);
                }
            };
            //支持使用标签方式引入
            if (typeof window !== "undefined" && window.Vue) {
                exportModules(window.Vue);
            }
            break;
        }
        case 'function': {
            exportModules = modules;
            break;
        }
        case 'directive': {
            // 全局引入
            exportModules = function (Vue, opts = {}) {
                for (let i in modules) {
                    Vue.directive(i, modules[i]);
                }
            };
            break;
        }    
    }
    return exportModules;
}

// --- 组件 ---
// 注意:require 不能放在方法里,无法识别
const componentList = require.context("./src/components", true, /\.vue$/);
const MyComponents = exportModule(componentList, 'component');

// --- 方法 ---
const functionList = require.context("./src/functions", true, /\.js$/);
const MyFunctions = exportModule(functionList, 'function');

// --- 指令 ---
const directiveList = require.context("./src/directive", true, /\.js$/);
const MyDirectives= exportModule(directiveList, 'directive');

// 合并导出
Object.assign(exports, {MyComponents}, {MyFunctions}, {MyDirectives});


二、使用

1、全局引入

main.js

import Vue from 'vue'
import App from './App.vue'

// 全局引入 - 指令(仅全局)
import { MyDirectives } from 'my-webcomponents'
// 方式一
// MyDirectives(Vue);
// 方式二
Vue.use(MyDirectives);

// 全局引入 - 组件(可全局或局部)
import { MyComponents } from 'my-webcomponents';
Vue.use(MyComponents);


// 全局引入 - 方法(仅全局)
import { MyFunction } from 'my-webcomponents';

export default {
    name: 'App'
}

new Vue({
  render: h => h(App),
}).$mount('#app')

2、局部引入

单 .vue 文件

import { MyLayerTree, MyToolBar } from 'my-webcomponents'

export default {
    components: {
        MyLayerTree,
        MyToolBar
    },
    // ...
</script>

 

 

本文地址:https://blog.csdn.net/sinat_31213021/article/details/112565347

相关标签: Vue-组件化