prop 是什么

prop 是你可以在組件上注冊的一些自定義特性。當(dāng)一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實(shí)例的一個屬性。

如何使用 prop

1. 在組件內(nèi)部，使用 props 選項(xiàng)來定義好，當(dāng)前組件需要用到的參數(shù)
2. 調(diào)用組件的時候，在組件的標(biāo)簽上面，通過自定義屬性來傳遞 prop

    new Vue({
      el: '#app',
      components: {
        helloWorld: {
          props: ['title'],
          data: function() {
            return {
              msg: '張三'
            }
          },
          template: `
            <div>{{ msg }}</div>
          `
        }
      }
    })

<div id="app">
  <hello-world title="我的天呀"></hello-world>
</div>

props 的定義有幾種

兩種

1. 數(shù)組的方式

props: ['title', 'xxx']

2. 對象的方式 （這種方式能夠?qū)崿F(xiàn) prop 的驗(yàn)證）

props: {
  title: String,
  // 對象或數(shù)組默認(rèn)值必須必須傳遞一個函數(shù)，然后返回默認(rèn)值
  xxx: {
    type: Object,
    default: function() {
      return { message: 'hello' }
    }
  },
  // 自定義驗(yàn)證函數(shù)
  yyy: {
    validator: function(value) {
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}

非 Prop 的特性

如果使用組件時，傳遞的某個屬性，在組件中沒有定義這個屬性的prop的話，那么這個屬性就是一個 非 prop 的特性。非 prop 的特性 會自定添加到組件的 根元素 上面。

替換/合并已有的特性

默認(rèn)情況下，非 prop 的特性 會直接替換 組件的 根元素 上面的相同名字的屬性。（如下代碼，最終渲染在瀏覽器中的 hello 組件的根元素的id值將會是 hhh）。但如果是 class 或者style 的話將會對兩邊的值做一個合并。

Vue.component('hello', {
  template: `
    <div id="box">我的天呀</div>
  `
})

<div id="app">
  <hello id="hhh"></hello>
</div>

禁用特性繼承

如果不希望組件的根元素繼承特性，你可以設(shè)置組件的 inheritAttrs 選項(xiàng)為 false

Vue.component('hello', {
  inheritAttrs: false
})

$attrs 與 禁用特性繼承 來實(shí)現(xiàn) 基礎(chǔ)組件

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"
  class="username-input"
  placeholder="Enter your username"
></base-input>

PS:

1. prop 是不能主動修改的
2. prop 定義時如果是 駝峰 命令方式，那么使用的時候需要為 短橫線 方式，與組件一樣在3種特殊情況下，不需要。