快應(yīng)用 Props

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

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

Prop 寫法

Prop 屬性名稱使用 camelCase(駝峰命名法)命名是，在外部傳遞數(shù)據(jù)時請轉(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è)置默認(rèn)值。當(dāng)調(diào)用子組件沒有傳入該數(shù)據(jù)時，將會自動設(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ù)會刷新為最新值;子組件的 prop 值發(fā)生改變，并不會改變父組件中值。

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

常見的三種操作 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 這個對象，可以采用JSON.parse(JSON.stringify(propObject))，將 prop 深度克隆。

2.$watch 監(jiān)控數(shù)據(jù)改變

如果是監(jiān)聽對象中的屬性，參數(shù)請使用.分割，如：$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ù)變化，你可以對數(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+

我們在 1050+ 版本新增了計算屬性，詳見計算屬性。

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

屬性校驗

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

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

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

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

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