通過本節(jié)，你將學(xué)會(huì)：

• Prop 寫法
• Prop 屬性默認(rèn)值
• Prop 數(shù)據(jù)單向性
• Prop 屬性校驗(yàn)

Prop 寫法

Prop 屬性名稱使用 camelCase(駝峰命名法)命名是，在外部傳遞數(shù)據(jù)時(shí)請(qǐng)轉(zhuǎn)化為以 kebab-case (短橫線分隔命名) propObject 轉(zhuǎn)換為 prop-object。

<!-- 子組件 -->
<template>
  <div class="child-demo">
    <text>{{ propObject.name }}</text>
  </div>
</template>
<script>
  export default {
    props: ['propObject']
  }
</script>

<!-- 父組件 -->
<import name="comp" src="./comp"></import>
<template>
  <div class="parent-demo">
    <comp prop-object="{{obj}}"></comp>
  </div>
</template>
<script>
  export default {
    private: {
      obj: {
        name: 'child-demo'
      }
    }
  }
</script>

屬性默認(rèn)值

子組件聲明屬性時(shí)，可以設(shè)置默認(rèn)值。當(dāng)調(diào)用子組件沒有傳入該數(shù)據(jù)時(shí)，將會(huì)自動(dòng)設(shè)為默認(rèn)值。

如果需要設(shè)置默認(rèn)值，props 屬性的寫法必須要要寫成 Object 形式，不能寫成 Array 形式。

示例如下：

<script>
  // 子組件
  export default {
    props: {
      prop1: {
        default: 'Hello' //默認(rèn)值
      },
      prop2Object: {} //不設(shè)置默認(rèn)值
    },
    onInit() {
      console.info(`外部傳遞的數(shù)據(jù)：`, this.prop1, this.prop2Object)
    }
  }
</script>

數(shù)據(jù)單向性

父子間的數(shù)據(jù)傳輸是單向性的，父組件 prop 數(shù)據(jù)更新，子組件的數(shù)據(jù)會(huì)刷新為最新值;子組件的 prop 值發(fā)生改變，并不會(huì)改變父組件中值。

但是prop 類型事數(shù)組或者對(duì)象，自組件變化會(huì)影響到父組件的值，這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop 的值，這是危險(xiǎn)性操作。

常見的三種操作 prop 值的方法：

1.將 prop 傳入的值作為初始值，用 data 接收

<script>
  export default {
    props: ['say', 'propObject'],
    data() {
      return {
        obj: this.propObject.count
      }
    },
    onInit() {
      console.info(`外部傳遞的數(shù)據(jù)：`, this.say, this.propObject)
    }
  }
</script>

提示：

• 如果你想用 data 直接接收 propObject 這個(gè)對(duì)象，可以采用JSON.parse(JSON.stringify(propObject))，將 prop 深度克隆。

2.$watch 監(jiān)控?cái)?shù)據(jù)改變

如果是監(jiān)聽對(duì)象中的屬性，參數(shù)請(qǐng)使用.分割，如：$watch(xxx.xxx.xxx, methodName)

<script>
  export default {
    props: ['say', 'propObject'],
    data() {
      return {
        propSay: this.say
      }
    },
    onInit() {
      // 監(jiān)聽數(shù)據(jù)變化
      this.$watch('prosayp1', 'watchPropsChange')
      this.$watch('propObject.name', 'watchPropsChange')
    },
    /**
     * 監(jiān)聽數(shù)據(jù)變化，你可以對(duì)數(shù)據(jù)處理后，設(shè)置值到data上
     * @param newV
     * @param oldV
     */
    watchPropsChange(newV, oldV) {
      console.info(`監(jiān)聽數(shù)據(jù)變化：`, newV, oldV)
      this.propSay = newV && newV.toUpperCase()
    }
  }
</script>

3.computed 屬性 1050+

我們?cè)?nbsp;1050+ 版本新增了計(jì)算屬性，詳見計(jì)算屬性。

  <script>
  export default {
    props: [
    'say',
    'propObject'
    ],
    computed:{
      obj(){
          return this.say.toUpperCase()
      }
    }
  }

屬性校驗(yàn)

子組件聲明屬性時(shí)，可以指定校驗(yàn)規(guī)格。如果傳入的數(shù)據(jù)不符合規(guī)格，devtool 會(huì)發(fā)出警告。當(dāng)組件給其他開發(fā)者使用時(shí)，這將會(huì)很有用處。

校驗(yàn)方式包括必填項(xiàng)檢查、類型檢查和函數(shù)檢查。驗(yàn)證順序是 必填項(xiàng)檢查 -> 類型檢查 -> 函數(shù)檢查，如有警告，僅報(bào)告最前置的檢查項(xiàng)目。

類型檢查支持的類型包括 [String、Number、Boolean、Function、Object、Array]。

如果需要設(shè)置驗(yàn)證規(guī)格，props 屬性的寫法必須要要寫成 Object 形式，不能寫成 Array 形式。

<script>
  // 子組件
  export default {
    props: {
      prop1: Number, // 僅類型檢查
      prop2Object: {
        type: String, // 類型檢查
        required: true, // 必填項(xiàng)檢查
        validator: function(value) {
          //函數(shù)檢查
          // 這個(gè)值必須匹配下列字符串中的一個(gè)
          return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
      }
    },
    onInit() {
      console.info(`外部傳遞的數(shù)據(jù)：`, this.prop1, this.prop2Object)
    }
  }
</script>