首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

vue.js查看注册了哪些基础组件

2018年10月22日 发布 阅读(616) 作者:懒炖

通过官方的示例,我们可以自动化注册基础组件,假设我的其他组件放在./components/base

通过下面的代码自动注册

  1. // 引入loadash
  2. import upperFirst from 'lodash/upperFirst';
  3. import camelCase from 'lodash/camelCase';
  4. /**
  5. * 自动化注册基础组件
  6. * 必须是在new Vue根实例之前注册
  7. */
  8. const requireComponent = require.context(
  9. // 其组件目录的相对路径
  10. "./components/base",
  11. // 是否查询其子目录
  12. true,
  13. // 匹配基础组件文件名的正则表达式
  14. /[a-z]\w+\.(vue|js)$/
  15. );
  16. requireComponent.keys().forEach(fileName => {
  17. // 获取组件配置
  18. const componentConfig = requireComponent(fileName);
  19. // 获取组件的 PascalCase 命名
  20. const componentName = upperFirst(
  21. camelCase(
  22. // 剥去文件名开头的 `./` 和结尾的扩展名
  23. fileName.replace(/^\.\/(.*)\.\w+$/, "$1")
  24. )
  25. );
  26. // 全局注册组件
  27. Vue.component(
  28. componentName,
  29. // 如果这个组件选项是通过 `export default` 导出的,
  30. // 那么就会优先使用 `.default`,
  31. // 否则回退到使用模块的根。
  32. componentConfig.default || componentConfig
  33. );
  34. });

在浏览器控制台打印vue根实例

  1. /**
  2. * 创建根实例
  3. */
  4. var vue = new Vue({
  5. el: "#app",
  6. render: h => h(App)
  7. });
  8. console.log(vue);

如下图,在Vue.$options.components.__proto__中我们可以看到已经注册了的组件

通过上图我们可以看到,基础组件目录名称的第一个字母都是大写,假如我们的一个组件的文件位置是./components/base/tab/tabbar.vue,那么生成的组件名称为TabTabbar

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •