什么是组件？
可以组合的物件就叫组件，比如手臂、腿就是人的组件。
组件可以认为是实例中的实例。
camelCased (驼峰式) 命名与kebabCase (短横线) 命名
1. 在html中不允许使用驼峰！
html中的组件必须用短横线命名，例如my-component。
在组件中, 父组件给子组件传递数据必须用短横线，例如my-msg。
2. 在template中必须使用驼峰。
<div id="app">
//html中只能用短横线或小写
<my-component my-msg='lalala'></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
components: {
'myComponent': {
template: '<div>{{myMsg}}</div> ', //这里必须用驼峰
props: ['myMsg'],
}
}
})
3.在组件的data中用this.XXX引用时,只能是驼峰命名方式，比如this.myMsg。
<div id="app">
<my-component my-msg='lalala'></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
components: {
'myComponent': {
template: '<div>{{abc}}</div> ',
props: ['myMsg'],
data() {
return {
abc: this.myMsg //只能是驼峰
}
}
}
}
})
不规范命名的报错信息，如下图所示:
[图片上传失败...(image-bd107d-1657476144076)]
[图片上传失败...(image-3ac486-1657476144076)]
[图片上传失败...(image-cc6058-1657476144076)]
4.文件名最好全小写，因为有些古老的操作系统(window10)可能不能识别大小写，防止2个大小写文件重名。
5.组件首字母最好大写
import Demo from './demo.vue'
