vue入門中元件命名時需要注意的地方
阿新 • • 發佈：2018-12-20
下面這張圖是從vue官方上擷取的
其實不只是駝峰命名的prop在自定義標籤中需要用等價的短橫線分隔命名，元件自定義的標籤名稱也一樣
還是官網的例子只不過我把元件的名稱改為駝峰式為 blogPost
Vue.component('blogPost', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' })
如果在html中自定義標籤想當然的認為是blogPost，並按如下的方式寫將會報錯
<!----> <blogPost post-title="hello!"></blogPost>
完整程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h3>演示駝峰式命名的自定義標籤的寫法</h3> <!-- v-bind:post-title="..."動態傳值，簡寫為:post-title="..." --> <!-- 演示完報錯資訊只修改blogPost 為blog-post即可--> <blogPost :post-title="hello"></blogPost> </div> </body> <script src="../../node_modules/vue/dist/vue.js"></script> <script> Vue.component('blogPost', { template: '<h3>{{ postTitle }}</h3>', // 在 JavaScript 中是 camelCase 的 props: ['postTitle'] }); let app = new Vue({ el: "#app", // el即element，該vue例項要渲染的頁面元素 data: { hello: 'hello world!' } }); </script> </html>
想達到的效果頁面顯示兩行
第一行父元件的<h3> 演示駝峰式命名的自定義標籤的寫法</h3>
第二行動態傳值給子元件的<h3>hello world!</h3>
當然<h3></h3>瀏覽器解析並不會顯示
瀏覽器檢視效果只顯示第一行即父元件的'<h3></h3>'標籤的內容，為什麼呢開啟瀏覽器開發者工具，報錯信心如下：
問你註冊<blogpost>元件了嗎，發現沒這裡都是小寫了並不是blogPost，我們在html中將自定義標籤修改為短橫線分隔命名（相對於定義元件時的駝峰式）
<blog-post post-title="hello!"></blog-post>
再來檢視，達到預期效果
