<!-- 在HTML模版中始终使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>当注册组件时，使用中划线、小驼峰、大驼峰这三种任意一种都可以
// 在组件定义中
components: {
// 使用 中划线 形式注册
'kebab-cased-component': { /* ... */ },
// 使用 小驼峰 形式注册
'camelCasedComponent': { /* ... */ },
// 使用 大驼峰 形式注册
'PascalCasedComponent': { /* ... */ }
}
Vue组件嵌套限制
并不是所有的元素都可以嵌套模板，因为要受到HTML元素嵌套规则的限制，尤其像<ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部
[注意]关于HTML标签的详细嵌套规则移步至此在自定义组件中使用这些受限制的元素时会导致一些问题，例如
<table id="example">
<my-row>...</my-row>
</table>自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误
<script>
// 注册
var header = {
template: '<div class="hd">我是标题</div>'
};
// 创建实例
new Vue({
el: '#example',
components: {
'my-row': header
}
})
</script>is属性
变通的方案是使用特殊的 is 属性
<table id="example">
<tr is="my-row"></tr>
</table>
<script>
// 注册
var header = {
template: '<div class="hd">我是标题</div>'
};
// 创建实例
new Vue({
el: '#example',
components: {
'my-row': header
}
})
</script>
Vue组件的根元素
Vue强制要求每一个Vue实例(组件本质上就是一个Vue实例)需要有一个根元素
如下所示，则会报错
<div id="example">
<my-component></my-component>
</div>
<script>
// 注册
Vue.component('my-component', {
template: `
<p>第一段</p>
<p>第二段</p>
`,
})
// 创建根实例
new Vue({
el: '#example'
})
</script>需要改写成如下所示
<script>
// 注册
Vue.component('my-component', {
template: `
