vue中prop屬性傳值解析

剛接觸前端開發的小夥伴或許不熟悉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

相關文章
相關標籤/搜索