vue組件使用駝峰命名和短橫線命名問題(導致沒有找到組件)

轉自：https://blog.csdn.net/weixin_44198965/article/details/99607987

前言

最近使用 vue 組件時，名稱使用了駝峰命名之后，組件寫在 html 代碼段中卻拋出錯誤。

HTML:

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

JavaScript：

Vue.component('newButton',{ data () { return {} }, template:'<button>示例按鈕</button>' }) new Vue({el:'#app'}) 

錯誤：

vue給出的錯誤提示沒有找到組件，但事實是由駝峰命名所引起。

解決方法

在書寫組件 HTML 代碼段中，將大寫字母改為小寫，然后在前面加一個 " - " 號連接即可。

HTML：

<div id="app"> <new-button></new-button> </div> 

JavaScript：

Vue.component('newButton',{ data () { return {} }, template:'<button>示例按鈕</button>' }) new Vue({el:'#app'})