记录一下vue组件化开发遇到的坑。踩坑如下:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js/vue.js"></script>
</head>
<body>
<div id="app">
<myCpn></myCpn>
</div>
<script>
//1.创建组件构造器
const cpnConstructor = Vue.extend({
template:'<div>呵呵呵</div>'
}) ;
//2.注册组件
Vue.component('myCpn',cpnConstructor) ;
const app = new Vue({
el: '#app'
})
</script>
</body>
</html>
打开浏览器却发现报错:组件并没有被渲染出来,反而报错了说我用的组件没有注册,我当时真是挤破脑袋想了半天也没发现问题出在哪里
然后仔细一看:
我明明使用的是Mycpn怎么变成了mycpn,于是把自定义的组件也改成小写,代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js/vue.js"></script>
</head>
<body>
<div id="app">
<mycpn></mycpn>
</div>
<script>
//1.创建组件构造器
const cpnConstructor = Vue.extend({
template:'<div>自定义组件</div>'
}) ;
//2.注册组件
Vue.component('myCpn',cpnConstructor) ;
const app = new Vue({
el: '#app'
})
</script>
</body>
</html>
然后运行代码,完全正常,这时候大家都会认为vue注册组件不能用大写命名,后面我也试了很多种命名方式,比如”my-template“这样也是可以的
”My-template“这样的会报错
后来在官网看到这句话camelCase vs. kebab-case HTML 特性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模版,则没有这些限制。
一切都水落石出了,哈哈