您的位置：首页 > Web前端 > Vue.js

Vue学习过程中由自定义组件命名引起的错误

2018-08-23 10:27 239 查看

在运行该实例时出现了一些错误：

<!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中使用自定义组件时，自定义组件名：字母全小写必须包含一个连字符。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航