在运行该实例时出现了一些错误：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="myDemo">
<showBigfont>大号字像H1一样</showBigfont>
</div>
<script type="text/javascript">
Vue.component('showBigfont',{
template:'<h1>'+
'<slot></slot>'
+'</h1>'
})
var myDemo=new Vue({
el:'#myDemo',
data:{},
})
</script>
</body>
</html>错误如下：
Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the “name” option.(found in
<Root>)
最终发现仅仅是自定义组件的命名出现了问题。
上面定义的组件名为showBigfont
最终改为show-big-font时，就不在报错了，也得到了它应有的效果。
那么最后总结一下，关于自定义组件的命名的两种方式：
1.短横线分隔命名：例如：my-component my-component-name
2.驼峰式命名：例如MyComponent 注意：直接在DOM中使用时只有第一种有效。所以直接在DOM中使用自定义组件时，自定义组件名：字母全小写必须包含一个连字符。