这段时间一直在弄 vue, 当然也遇到很多问题, 这里就来跟大家分享一些注册自定义模板组件的心得
首先 "VUE 注册组件命名时不能用大写" 其实这句话是不对的, 但我们很多人开始都觉得是对的, 因为大家都踩过大写命名的坑
下面我们来看个例子:
- <div id="app">
- <myTemplate></myTemplate>
- </div>
- <script>
- Vue.component('myTemplate',{
- template: '<h1 > 这里是自定义组件的内容 </h1>'
- })
- new Vue({
- el: '#app'
- })
- </script>
当我看完官网的文档后, 信心满满的第一次准备自定义组件时, 就写的跟上面差不多类型的代码
但是当我运行代码时, 组件并没有被渲染出来, 反而报错了说我用的组件没有注册, 我当时真是挤破脑袋想了半天也没发现问题出在哪里
这时候我在想难道我的命名和源码里的冲突了? 于是我把代码改成这样了↓
- <div id="app">
- <mytemplate></mytemplate>
- </div>
- <script>
- Vue.component('mytemplate',{
- template: '<h1 > 这里是自定义组件的内容 </h1>'
- })
- new Vue({
- el: '#app'
- })
- </script>
然后运行代码, ok 完全正常, 这时候大家都会认为 vue 注册组件不能用大写命名, 我当时也这么认为的, 直到这两天在用饿了么 elementUI 框架, 当我看了他们的源码, 发现原来并不是这样
他们注册组件的命名就和我第一次一样 myTemplate, 标准的驼峰命名方法, 那么我一开始为什么会报错呢? 这是为什么呢? 难道 VUE 嫌弃我?
原来是我调用组件时的方法错了, VUE 是允许用大写字母来注册组件的, 但当你使用时得在驼峰命名的大写字母间加上 "-" 并都改为小写, 看下面代码
- <div id="app">
- <my-template></my-template>
- </div>
- <script>
- Vue.component('myTemplate',{
- template: '<h1 > 这里是自定义组件的内容 </h1>'
- })
- new Vue({
- el: '#app'
- })
- </script>
代码运行正常, 这个时候大家是不是看出来, vue 其实是可以用大写字母命名注册的
后面我也试了很多种命名方式, 比如 "my-template" 这样也是可以的
"My-template" 这样的会报错
----------------------------------------------------------------
后来在官网看到这句话 camelCase vs. kebab-case html 特性是不区分大小写的. 所以, 当使用的不是字符串模版, camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模版, 则没有这些限制.
一切都水落石出了, 哈哈
来源: https://www.cnblogs.com/bobo1/p/10766783.html