vue中prop屬性傳值解析

剛接觸前端開發的小夥伴或許不熟悉prop屬性，可是有react框架經驗的小夥伴確定很熟悉它，我一直在用props屬性，但到今天我纔有時間整理prop屬性的用法。廢話很少直入主題。
1.prop的定義：

在沒有狀態管理機制的時候，prop屬性是組件之間主要的通訊方式，prop屬性實際上是一個對象，在這個對象裏能夠定義一些數據，而這些數據能夠經過父組件傳遞給子組件。

2.prop定義的數據類型

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屬性歡迎各位道友指正補充。