Vue 組件是構建應用程序時最重要的概念之一，為了獲得最佳性能和可維護性，Vue 組件屬性是一個必須了解的主題。Vue 組件的構建模塊都是基于 Property 來實現的。這個模塊提供了各種功能，可以設置一些屬性來達到我們期望的功能，并且這些屬性也可以被其他開發者所復用。

Vue.component('my-component', {
props:{
propA: Number,
propB: [String, Number],
propC: {
type: String,
required: true,
default: 'default value of propC',
validator: function(value){
return value.length >5
}
}
}
})

在上面的代碼中，props 就是組件中的屬性。在組件中定義屬性時，可以設置屬性名、屬性值、屬性類型等信息。屬性類型可以是數組或對象等類型，如果你希望一個屬性是必須的，可以設置 required 屬性。如果沒有傳遞 propC 的值，那么他會默認使用 default 值來代替， propC 也不能是一個空字符串，如果需要進一步驗證它的值，它還有 validator 屬性用于更加復雜的驗證。

組件屬性作為組件內部的狀態，通過組件的 properties 描述我們當前組件屬性的值，并一個在組件的方法中使用。

Vue.component('my-component', {
props: {
msg: String
},
template: '
{{ msg }}
'
})

上面的代碼中，組件模板使用 msg 屬性中的值做數據綁定。因此在使用這個組件時，可以將一個值作為屬性傳遞給組件：

最后，在使用 Vue 組件時，我們要記住一點，如果你不使用 camelCase 的屬性名稱，你要使用 kebab-case 的形式。camelCase 是編程語言的風格，而 kebab-case 是 HTML 標簽的命名規范。

Vue.component('my-component', {
props: { 'my-prop': String }
})