初学vue2,看到对调用是的命名说得有点模糊,就多试了几次,把规律记下来
假设任意名字为 ComponentXxxYyy1,
在<script>里
import ComponentXxxYyy1 from './[vue组件]'
且 components:{ComponentXxxYyy }
在HTML中可以识别的格式有:
<ComponentXxxYyy1> 完全相同
<Component-Xxx-Yyy1> 大写字母开头加-
<component-xxx-yyy1> 全小写但是加-
<Component-xxxYyy1> 有大写有小写加-
<componentXxxYyy1> 首字母大写
发现:
1.完全相同可以调用
2.可以小写,但是需要在小写的前面加-
3.如果大写正确匹配,- 没用
4.首字母大小写不影响
5.数字视为大写字母
总结: 为了便于阅读代码, 要么正确匹配(1), 要么全写中间加-(2).
ps:
1.如果引用本身就是全小写的,那只有全小写一种方法,不能加-.
2.vue组件名和ComponentXxxYyy1 可以没有任何关系,组件内定义的name也没用
若components进行了定义,会只识别对应的名字
js:
components:{
'abc':ComponentXxxYyy1
}
此时HTML中只有<abc>标签生效