為什麼VUE註冊元件命名時不能用大寫的?

2022-07-01 23:03:13 字數 835 閱讀 6312

這段時間一直在弄vue,當然也遇到很多問題,這裡就來跟大家分享一些註冊自定義模板元件的心得

首先「vue註冊元件命名時不能用大寫「其實這句話是不對的,但我們很多人開始都覺得是對的,因為大家都踩過大寫命名的坑

下面我們來看個例子:

當我看完官網的文件後,信心滿滿的第一次準備自定義元件時,就寫的跟上面差不多態別的**

但是當我執行**時,元件並沒有被渲染出來,反而報錯了說我用的元件沒有註冊,我當時真是擠破腦袋想了半天也沒發現問題出在**

這時候我在想難道我的命名和原始碼裡的衝突了?於是我把**改成這樣了↓

然後執行**,ok完全正常,這時候大家都會認為vue註冊元件不能用大寫命名,我當時也這麼認為的,直到這兩天在用餓了麼elementui框架,當我看了他們的原始碼,發現原來並不是這樣

他們註冊元件的命名就和我第一次一樣mytemplate,標準的駝峰命名方法,那麼我一開始為什麼會報錯呢?這是為什麼呢?難道vue嫌棄我?

原來是我呼叫元件時的方法錯了,vue是允許用大寫字母來註冊元件的,但當你使用時得在駝峰命名的大寫字母間加上」-「並都改為小寫,看下面**

**執行正常,這個時候大家是不是看出來,vue其實是可以用大寫字母命名註冊的

後面我也試了很多種命名方式,比如」my-template「這樣也是可以的

」my-template「這樣的會報錯

後來在官網看到這句話camelcase vs. kebab-case    html 特性是不區分大小寫的。所以,當使用的不是字串模版,camelcased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名: 如果你使用字串模版,則沒有這些限制。

一切都水落石出了,哈哈

vue註冊元件

下面是建立乙個新的構造器,元件構造器 const hello vue.extend my hello元件註冊,第二個引數傳入的是擴充套件的構造器 vue.component my hello hello my world元件註冊,第二個引數傳入的是選項物件 vue.component my worl...

VUE註冊元件

在註冊乙個元件的時候,我們始終需要給它乙個名字。比如在全域性註冊的時候我們已經看到了 vue.component my component name 該元件名就是 vue.component 的第乙個引數。你給予元件的名字可能依賴於你打算拿它來做什麼。當直接在 dom 中使用乙個元件 而不是在字串模...

vue動態註冊元件

vue的架構思想,其實就是想按元件化開發,提公升前端的模組復用性,因此在開發過程中,元件的巢狀是很正常的需求。例如以下需求 在index.vue頁面想呼叫元件a,a的頁面有兩種樣式,分別為b,和c,想在index.vue呼叫兩個a元件,並且a元件包含有b和c樣式。那麼在開發的時候,我習慣把b和c的樣...