vue 实现基础组件的自动化全局注册

参考官网：https://cn.vuejs.org/v2/guide/components-registration.html

在日常开发中，有一些组件是比较常用，但是为了避免在开发过程中不停地引入，或者在main.js中注册，，或者每添加一个组件就需要手动注册一次。则直接进行自动化全局注册。

自动化全局注册，官网上都详细的说明，以下是自己官网的说明基础上进行了一个demo开发实例：

1、自定义文件夹：

在src下新建一个components文件夹，用于存放组件。并新建一个用于存放需要自动化全局注册的组件，例如base。

2、在base文件夹下定义index.js，具体代码如下示：

// 基础组件的自动化全局注册
import Vue from 'vue'
const requireComponent = require.context(
    // 其组件目录的相对路径
    './',
    // 是否查询其子目录
    true,
    // 匹配基础组件文件名的正则表达式
    /\.vue$/
  )
  requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName)
    // 全局注册组件
    Vue.component(
        componentConfig.default.name,   // 此处的name,是组件属性定义的name
        // 如果这个组件选项是通过 `export default` 导出的，
        // 那么就会优先使用 `.default`，
        // 否则回退到使用模块的根。
        componentConfig.default
    )
  })

以上代码需要解释的地方：

　　1、匹配基础组件文件名的正则表达式，此处需要根据实际的组件名称和规则进行配置；

　　2、componentConfig.default.name此处用到的，是表示组件的名称，并不是固定的写法。可以用不同的写法来表示组件名称，例如可以直接解析fileName得出文件夹的名称作为组件名称也是可以的。componentConfig.default.name中的name，来自于组件定义的时候页面的name。若页面没有定义name，则报错。

3、在main.js中引入index.js文件

由于全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。

// 基础组件的自动化全局注册。全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
import './components/base/index'

4、直接在需要的地方使用该组件即可

页面效果如下示：

以上就是vue 实现基础组件的自动化全局注册的详细内容，更多关于vue 组件全局注册的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解vue 动态加载并注册组件且通过 render动态创建该组件

    基于 iview Tabs 组件实现 功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue <template> <div class="content-left-menu"> <div class="item-contain layout-content"> <Tabs class="cmcc-ivu-tab2" t

  • Vue封装的组件全局注册并引用

    Vue封装的组件全局注册并引用

    当vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情. 每当我们需要修改的时候,只需维护那一个功能性组件即可,不需要这个功能了,只需要从页面中删除这个组件的引用即可. 那么废话不多说了,我们来看看如何全局注册并一键引入(类似于element ui的全部引入). 如何封装组件就不多赘述了. 参考vue官网的做法:vue官网全局注册 1.正则判断路径以及文件名,获取全部组件并全局注册(可以直

  • vue动态注册组件实例代码详解

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作. 示例: <!-- 当 `currentView` 改变时,组件也跟着改变 --> <component v-bind:is="currentView"></component> 详见vue API中关于

  • vue注册组件的几种方式总结

    1.全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2.局部注册 var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 将只在父模板可用 'my-component': Child } }) 3.扩展实例 // 定义一个混合对象 var myMi

  • VUE注册全局组件和局部组件过程解析

    这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users'

  • Vue注册组件命名时不能用大写的原因浅析

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得. 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的,因为大家都踩过大写命名的坑 下面我们来看个例子: <div id="app"> <myTemplate></myTemplate> </div> <script> Vue.component('myTemplate',{ tem

  • Vue 组件注册实例详解

    本文实例讲述了Vue 组件注册.分享给大家供大家参考,具体如下: 1 组件名 在注册一个组件的时候,我们始终需要给它一个名字.比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... */ }) 该组件名就是 Vue.component 的第一个参数. 你给予组件的名字可能依赖于你打算拿它来做什么.当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循 W3C 规范 中的自定义组件名 (字

  • 浅谈Vue组件及组件的注册方法

    相信在使用Vue进行项目开发的时候很多人会接触到vue组件,最常见的就是我们使用的element-ui组件库,用起来确实很方便,大大减少了我们的开发时间.在一个项目中其实有很多可复用的代码块,如果我们可以把这些内容封装成一个组件就能够很方便的进行各种重复使用. 那么什么是Vue组件呢?它是vue.js最强大的功能之一,是可扩展的html元素,是封装可重用的代码,同时也是Vue实例,可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子. 使用组件 组件名大小写 定义组件名的方

  • 详解vue 组件注册

    一.了解组件注册的两种方式 1.1 全局组件的注册方法 //main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false let Hello = { name: 'hello', template: '这是全局组件hello' } Vue.component('hello', Hello) new Vue({ el: '#ap

  • vue 注册组件的使用详解

    一.介绍 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 那么什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 二.如何注册组件 Vue.js的组件的使用有3个步骤:创建组件构造器.注册组件和使用组件. 下面用代码演示这三步 <!DOCTYPE html> <html> <body> <div id=&q

  • Vue 组件注册全解析

    全局组件注册语法 components中的两个参数组件名称和组件内容 Vue.component(组件名称, { data: 组件数据, template:组件模板内容 }) 全局组件注册应用 组件创建: Vue.component('button-counter', { data: function(){ return { count: 0 } }, template: '<button @click="handle">点击了{{count}}次</button&g

随机推荐