剛接觸前端開發的小夥伴或許不熟悉prop屬性,可是有react框架經驗的小夥伴確定很熟悉它,我一直在用props屬性,但到今天我纔有時間整理prop屬性的用法。廢話很少直入主題。
1.prop的定義:前端
在沒有狀態管理機制的時候,prop屬性是組件之間主要的通訊方式,prop屬性實際上是一個對象,在這個對象裏能夠定義一些數據,而這些數據能夠經過父組件傳遞給子組件。
2.prop定義的數據類型react
props: { name: String, //字符串類型 type: { validator: function(value) { //驗證函數 // 這個值必須匹配下列字符串中的一個 return ["success", "warning", "danger"].includes(value); } }, list: { type: Array,//數組類型,也能夠是Object default: () => [] }, isVisible: { //Boolean類型 type: Boolean, default: false }, onChange: { //函數類型 type: Function, default: () => {} } },
prop屬性中能夠定義屬性的類型,也能夠定義屬性的初始值。如name:String,default:"vm",表示第一次加載name屬性時其值爲vm。prop屬性中定義的屬性也能夠驗證該屬性,好比上面的type屬性,其值必須是"success", "warning", "danger"中的任意一個,要是否是這是三個中的任意一個也能夠顯示,可是這時控制檯會報錯,因此要使用validator驗證函數時要謹慎。這裏的list定義的是一個數組,默認必須從一個工廠函數獲取。isVisble定義的是一個boolean值,默認是default:false。onChange定義的是一個函數,這個函數在這裏的意義是創建子組件向父組件傳值的途徑。
3.非prop特性數組
有時候父組件會向子組件傳任意特性。好比如今有一個父組件Parent,一個子組件Child,這時候你要向子組件添加一個data-date-picker="activated" ,這時候你在Child組件中加inheritAttrs:false
inheritAttrs: false, //不繼承父組件的特性
當你添加完這個屬性後子組件將不會繼承該屬性。
不少時候inheritAttrs:false結合$attrs實例方法能夠決定這些特性被賦予哪些元素。框架
Vue.component('base-input', { inheritAttrs: false, props: ['label', 'value'], template: ` <label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > </label> ` })
<base-input v-model="username" required placeholder="Enter your username" ></base-input>
這個例子中若是沒有給組件base-input中的input使用v-bind綁定$attrs實例屬性,在父組件中的placeholder屬性就不會傳遞給子組件。函數
關於Prop屬性歡迎各位道友指正補充。ui