Vue中調(diào)用組件使用kebab-case短橫線命名法和使用大駝峰的區(qū)別詳解

更新時間：2023年10月16日 11:25:24 作者：清風(fēng)細雨_林木木

這篇文章主要介紹了Vue中調(diào)用組件使用kebab-case（短橫線）命名法和使用大駝峰的區(qū)別,通過實例可以看出如果是在html中使用組件，那么就不能用大駝峰式寫法，如果是在.vue?文件中就可以，需要的朋友可以參考下

Vue中調(diào)用組件使用kebab-case（短橫線）命名法和使用大駝峰的區(qū)別

1.解析官網(wǎng)手冊說明

在這里插入圖片描述

紅線部分已經(jīng)說的很清楚，“直接在DOM（即非字符串模版）中只有kebab-case 生效”。

只不過說的不是人話，現(xiàn)在我們來具體分析一下。

2.什么是“字符串模版”，什么是“dom模版” 字符串模版

字符串模板就是寫在vue中的template中定義的模板，如.vue的單文件組件模板和定義組件時template屬性值的模板。字符串模板不會在頁面初始化參與頁面的渲染，會被vue進行解析編譯之后再被瀏覽器渲染，所以不受限于html結(jié)構(gòu)和標(biāo)簽的命名。

實例：

Vue.component('MyComponentA', {
    template: '<div MyId="123"><MyComponentB>hello, world</MyComponentB></div>'
})

<div id="app">
    <MyComponentA></MyComponentA>
</div>

dom模版(或者稱為Html模板)

dom模板就是寫在html文件中，一打開就會被瀏覽器進行解析渲染的，所以要遵循h(huán)tml結(jié)構(gòu)和標(biāo)簽的命名，否則瀏覽器不解析也就不能獲取內(nèi)容了。

下面的例子不會被正確渲染, 會被解析成mycomponent,但是注冊的vue的組件是MyComponent，因此無法渲染。

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app"> 
            Hello Vue
            <MyComponent></MyComponent>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script >
        //全局注冊
        Vue.component('MyComponent', {
            template: '<div>組件類容</div>'
        });
        new Vue ({
            el: '#app'
        });
    </script>
    </body>
</html>

能正常顯示的：

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app"> 
            Hello Vue
            <my-component></my-component>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script >
        //全局注冊
        Vue.component('my-component', {
            template: '<div>組件類容</div>'
        });
        new Vue ({
            el: '#app'
        });
    </script>
    </body>
</html>

總結(jié)：
通過上面的實例很簡單就能看出，如果是在html中使用組件，那么就不能用大駝峰式寫法。如果是在.vue 文件中就可以，就這么簡單。

到此這篇關(guān)于Vue中調(diào)用組件使用kebab-case（短橫線）命名法和使用大駝峰的區(qū)別的文章就介紹到這了,更多相關(guān)vue短橫線命名法和大駝峰區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: