我要悄悄的学Vue, 然后找一份工作(5).

学习Vue的第五天， 面对组件， 这个确实要花一点时间去思考，我所理解的组件就是将大的部分化解成小的部分， 逐步拆解， 甚至复用， 这就好比乐高积木一样， 大的机器人可以拆解分为多个部分，比如四肢和躯干， 那你也可以把四肢安装到其他机器人的身上， 这就是组件的思想 -----------拆解复用.

这篇博客总结一下使用组件的过程可能会遇到的一些bug， 以及我个人解决思路理解…

分离组件 root element 错误:

• 不管我们组件是不是分离的写法， 组件不能单独存在， 组件必须放在一个root 目录下面， 也就是必须把组件放在一个 div 里面，否则如上图错误.

组件中驼峰式命名的问题:

首先要明确一点， html中的标签是没有大小写的区分的， 这也就是为什么当我们给组件中用驼峰的方法， Vue依然会抛出错误， 说这个组件未定义之类的问题

问题可能出现的场景:

• 使用驼峰式给组件命名出现问题
• 使用驼峰式给props参数命名出现问题
• 使用驼峰式在emit给自定义事件命名出现问题

解决办法:

• 如果省的麻烦，公司没要求，就直接放弃驼峰， 直接全部小写，或者全部下划线.
• 或者, 我们依然在组件中，组件命名和props参数命名都使用驼峰式，但是在html上使用的时候在大写字母前面加一个-就可以了，比如
  cpnCounter — > cpn-Counter
  messageNew —> message-New
  这样就可以了
  考虑到props命名不能使用下划线，我还是喜欢这样用，
• 自定义事件命名的时候， 如果使用驼峰式，就算在html中加上下划线，还是有问题， 事件不会生效，
  clickEvent — > click-Event 这样是不可以的
  自定义事件名称还是必须得用全小写或者直接下划线
  比如 clickevent , click-event 这二种都是可以的.

记录了使用组件的一些可能的错误，root element ，以及使用驼峰式可能发生的问题.