美文网首页
如何全局注册组件

如何全局注册组件

作者: plum_meizi | 来源:发表于2021-05-11 14:44 被阅读0次

1.建一个文件global-components.ts,把需要全局使用的组件放入views/components/global文件夹

import Vue from 'vue';
const requireComponent = require['context'](
    // 其组件目录的相对路径
    '../views/components/global',
    // 是否查询其子目录
    true,
    // 匹配基础组件文件名的正则表达式
    /\w+\.vue$/
    // /[A-Z]\w+\.vue$/
);
requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName);
    // 获取组件的 PascalCase 命名
    const componentName =
        fileName
            .replace(/^\.\/(.*)\.\w+$/, '$1')
            .split('/')
            .pop() || '';
    // 全局注册组件
    Vue.component(componentName, componentConfig.default);
});

2.在main.ts引入使用

// 组件注册
import '@/common/global-components';

相关文章

  • 深入了解组件

    组件注册   组件注册分为全局注册和局部注册  全局注册   局部注册   基础组件的自动化全局注册可能你的许多组...

  • vue组件

    关于vue组件的总结 注册组件 vue中组件的注册分为两种: 全局注册 局部注册 全局注册 全局注册的组件在任何v...

  • Vue 之 组件

    组件注册 组件注册分为两种: 全局注册 和 局部注册 全局注册:全局注册的行为必须在根 Vue 实例 ...

  • 注册组件的语法糖写法

    1.全局注册组件语法糖 全局组件不用语法糖的构建过程:生成组件构造器 注册组件 使用组件 全局注册组件的语法糖,省...

  • 组件

    注册组件 注册组件分为全局注册和局部注册。 全局注册 step1.用Vue.component()方法定义一个组件...

  • vue-echarts全局组件使用

    在入口main.js 注册全局组件 引入 import 'echarts' 注册全局组件 Vue.componen...

  • Vue 组件全局注册和局部注册使用及原理

    Vue在注册组件时有两种方式,全局注册和局部注册全局注册的话我们可以在任意组件中使用注册的组件,而局部注册的话我们...

  • vue的组件注册

    vue的组件注册: 全局注册 局部注册

  • vue 组件循环引用

    Vue.component 全局注册组件时,组件循环引用可以解开。 当组件不是全局注册的时候 我们使用递归组件需要...

  • Vue教程进阶篇

    深入了解组件 组件注册 全局注册 局部注册 如果所有的组件都用全局注册意味着即使你已经不再使用一个组件,它仍然会被...

网友评论

      本文标题:如何全局注册组件

      本文链接:https://www.haomeiwen.com/subject/preadltx.html