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

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

2018年10月22日 发布 阅读(8001) 作者：Jerman

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

通过下面的代码自动注册

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

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

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

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

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

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

© 2018 IMQIANDUAN.COM 粤ICP备18143223号