关于引入tabbar的问题

老师，请问引入<c-tabbar/>这个标签的名字定义有没有什么要求，是不是跟script标签下面的components中的CTabbar的名字定义一样就可以并且不用区分大小写，并且可以随意加“-”这个符号？

<div class="g-footer-container">
  <c-tabbar/>
</div>

<script>
  import CTabbar from 'components/tabbar';
  export default {
    name: 'App',
    components: {
      CTabbar
    }
  };
</script>

慕UI3331485 2019-05-27

源自：实战：项目准备与骨架搭建 3-2 Tabbar 组件

收起

3回答

好帮手慕慕子回答被采纳获得+3积分 2019-05-28 09:44:22

同学你好， 1、根据如下图所示的官网解释，目前阶段我们可以简单的理解为使用name是为了方便调试和语义化。虽然同学测试只修改app.vue中名字是可行的，但是推荐使用一致的名称哦，这样可以让我们的代码更符合规范。

2、因为html的标准是以-短横线分隔，而js的标准是以驼峰分隔，为了一致性，进行了转化。老师这里给你截图的官网的解释

关于这一块，同学可以简单的理解为在JS中需要使用驼峰方式命名组件，在HTML中引入组件的时候名称统一小写，并使用-短横线驼峰命名分隔开。 Vue规定是这样的，目前阶段。我们可以不用了解其中的原理，会使用就可以了，等我们熟练使用之后可以在去看看Vue的源码，深入了解一下哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

卡布琦诺 2019-05-27 20:33:18

老师重新检验了一下，tabbar中的定义的name名字与app.vue中的保持一致，才能成功

如果tabbar中的定义的name名字是Ctabbar，那么在app.vue中就需要写成是<c-tabbar>，加一个c-前缀

希望可以帮到你！

收起回答

提问者慕UI3331485 #1

老师，我试了下只需要把您贴的第二张图片的app.vue中3个画出来的名字都改成abc就行。而src/components/tabbar/index.vue中<script> export default { name: 'CTabbar1111' }; 这个name改成什么都行。现在搞的很晕，视频里又改小写又加分隔符都能实现，不太清楚Vue这部分的运行机制并且不太清楚src/components/tabbar/index.vue中的name的实际作用是什么，好像写什么都不会影响代码的实现？

2019-05-28 00:29:46