• 技术文章 >web前端 >Vue.js

    看看Vue中如何封装一个自动化注册全局组件

    青灯夜游青灯夜游2021-11-18 19:37:00转载81
    本篇文章一起来看看Vue中如何封装一个自动化注册全局组件,希望对大家有所帮助!

    在项目的开发过程中,我们常常会去封装一些比较常用的全局组件, 但是每添加一个组件就需要手动在main.js引入注册,不仅麻烦还代码量多,着实让人心烦。 所以干脆封装一个自动化注册全局组件。【相关推荐:《vue.js教程》】

    1、自定义全局组件文件夹

    在src下新建一个globalComponents,用于存放全局组件,并新建一个组件,例如Orange

    1.gif

    2、组件自动注册配置文件

    globalComponents中创建一个index.js,用来查找全部组件并自动注册

    // 自动注册全局组件,每次新增组件必须重新编译
    import Vue from 'vue'
    
    const requireComponent = require.context(
      '../globalComponents', // 其组件目录的相对路径
      true, // 是否查询其子目录
      /\.vue$/ // 匹配基础组件文件名的正则表达式
    )
    requireComponent.keys().forEach(fileName => {
      const componentConfig = requireComponent(fileName); // 获取组件配置
      /**
       * 兼容 import export 和 require module.export 两种规范
       */
      // 如果这个组件选项是通过 export default 导出的,就会优先使用 .default
      const comp = componentConfig.default || componentConfig; 
      Vue.component(comp.name, comp) // 此处的name是组件属性定义的name
    })

    3、编辑Orange/index.vue

    组件最重要的是组件属性定义的name(name为自动注册的组件名)

    <template>
      <div class="wrapper">
        Orange
      </div>
    </template>
    
    <script>
    export default {
      name: 'Orange', // 此处的name属性值将为后面使用的组件名 <orange />,需唯一
      components: {},
      props: {},
      data() {
        return {}
      },
      created() {},
      mounted() {},
      methods: {}
    }
    </script>

    4、入口文件main.js中导入globalComponents/index.js

    // main.js
    
    import Vue from 'vue'
    // 自动注册全局组件
    import './globalComponents/index.js'
    <template>
      <div class="wrapper">
        <!-- 自动注册的全局组件 -->
        <orange />
      </div>
    </template>

    更多编程相关知识,请访问:编程入门!!

    以上就是看看Vue中如何封装一个自动化注册全局组件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    上一篇:vue项目中能引jquery吗 下一篇:浅析怎么使用Vue3开发一个Pagination公共组件
    VIP会员

    相关文章推荐

    • vue路由学习之区分$route和$router,看看它们的区别• 浅谈Vue中动态组件怎么使用?• vue中什么是SPA和MPA?两者有什么差异?• 手把手带你快速入门vuex4!• 浅析Vue中hash路由和history路由的区别

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网