zoukankan      html  css  js  c++  java
  • 为什么VUE注册组件命名时不能用大写的?

    这段时间一直在弄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 (短横线隔开式) 命名: 如果你使用字符串模版,则没有这些限制。

    一切都水落石出了,哈哈

  • 相关阅读:
    suse系统FTP问题
    Oracle SQL编写注意事项
    EXP-00056: ORACLE error 6550 encountered报错;
    Linux 单网卡多 IP 的配置方法
    Authorized users only. All activity may be monitored and reported.
    使用jconsole检测linux服务器
    Suse系统用户不能登录报错
    性能测试介绍
    判断浏览器是否是手机端
    JSONP 跨域请求
  • 原文地址:https://www.cnblogs.com/bobo1/p/10766783.html
Copyright © 2011-2022 走看看