错误代码：
<body>
<div id="myApp">
<h1>组件学习</h1>
<myComponent></myComponent>
</div>
<script>
//该组件无法显示
Vue.component('myComponent',{
template:'<div><h4>这是我自定义的组件</h4></div>'
})
var myApp = new Vue({
el: "#myApp",
data: {}
});
</script>
</body>运行结果：
错误提示：did you register the component correctly? For recursive components, make sure to provide the “name” option
然后我将组件名称全部改成小写后能够正常显示出来，我以为是组件命名不能包含大写，但根据以往的编程经验，我觉得肯定没有那么简单，标准的驼峰命名为什么不可以，没有道理啊。于是就上网查了查，发现Vue是允许用驼峰方式命名组件的，只是必须在驼峰命名的大写字母间加上”-“并都改为小写，于是我把代码改成这样：
<body>
<div id="myApp">
<h1>组件学习</h1>
<my-Component></my-Component>
</div>
<script>
//组件声明写在app声明之前才可以生效
//组件名不能包含大写字母
Vue.component('myComponent',{
template:'<div><h4>这是我自定义的组件</h4></div>'
})
var myApp = new Vue({
el: "#myApp",
data: {}
});
</script>
</body>
ok，组件完美的显示了出来。
运行结果：
版权声明：本文为u012565397原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。