1. props驗證

1）props驗證

在封裝組件時對外界傳遞過來的props數(shù)據(jù)進行合法性的校驗，從而防止數(shù)據(jù)不合法的問題。

使用數(shù)組類型的props節(jié)點的缺點：無法為每個prop指定具體的數(shù)據(jù)類型。

2）對象類型的props節(jié)點

使用對象類型的props節(jié)點，可以對每個prop進行數(shù)據(jù)類型的校驗。

<template>
  <h1>App</h1>
 
  <my-count :count="count" :state="state"></my-count>
</template>
 
<script>
import MyCount from './Count.vue'
 
export default {
    name: 'MyApp',
    data() {
        return {
            count: 1,
            state: true
        }
    },
    components: {
        MyCount
    }
}
</script>

3）props驗證

對象類型的props節(jié)點提供了多種數(shù)據(jù)驗證方案，例如：

• 基礎的類型檢查
• 多個可能的類型
• 必填項校驗
• 屬性默認值
• 自定義驗證函數(shù)

①基礎的類型檢查

可以直接為數(shù)組的prop屬性制定基礎的校驗類型，從而防止組建的使用者為其綁定錯誤類型。

②多個可能的類型

如果某個prop屬性值的類型不一致，此時可以通過數(shù)組的形式，為其指定多個可能的類型，示例代碼如下：

③必填項校驗

如果組建的某個prop屬性是必填項，必須讓組建的使用者為其傳遞屬性的值，此時，可以通過如下的方式將其設置為必填項：

④屬性默認值

在封裝組件時，可以為某個prop屬性指定默認值。

⑤自定義驗證函數(shù)

在封裝組件時，可以為prop屬性指定自定義的驗證函數(shù)，從而對prop屬性的值進行更加精確的控制。

2. 計算屬性

1）計算屬性

計算屬性本質上就是一個function函數(shù)，它可以實時監(jiān)聽data中數(shù)據(jù)的變化，并return一個計算后的新值，供組件渲染DOM時使用。

2）聲明計算屬性

計算屬性需要以function函數(shù)的形式聲明到組件的computed選項中。

計算屬性側重于得到一個計算的結果，因此計算屬性中必須有return返回值。

3）計算屬性的使用注意點

• 計算屬性必須定義在computed節(jié)點中
• 計算屬性必須是一個function函數(shù)
• 計算屬性必須有返回值
• 計算屬性必須當做普通屬性使用

4）計算屬性和方法

相對于方法來說，計算屬性會緩存計算的結果，只有計算屬性的依賴項發(fā)生變化時，才會重新進行運算，因此相對來說計算屬性的性能更好。

  <p>數(shù)量:{{ count }}乘以2的值為:{{ plus() }}</p>
  <p>數(shù)量:{{ count }}乘以2的值為:{{ plus() }}</p>
 
  methods: {
        plus() {
            console.log('方法被執(zhí)行了');
            return this.count*2;
        }
    }

   <p>數(shù)量:{{ count }}乘以2的值為:{{ plus }}</p>  
   <p>數(shù)量:{{ count }}乘以2的值為:{{ plus }}</p> 
 
  computed: {
        plus() {
            // 計算屬性會緩存計算的結果
            console.log('計算屬性被執(zhí)行了');
            return this.count*2;
        }
    }

3. 自定義事件

1）自定義事件

在封裝組件時，為了讓組件的使用者可以監(jiān)聽到組件內狀態(tài)的變化，此時需要用到組件的自定義事件。

2）自定義事件的3個使用步驟

在封裝組件時：

• 聲明自定義事件
• 觸發(fā)自定義事件

在使用組件時：

1.監(jiān)聽自定義事件

①聲明自定義事件

開發(fā)者為自定義組件封裝的自定義事件，必須是現(xiàn)在emits節(jié)點中聲明。

②觸發(fā)自定義事件

在emits節(jié)點下聲明的自定義事件，可以通過this.$emit('自定義事件的名稱')方法進行觸發(fā)。

③監(jiān)聽自定義事件

在使用自定義的組件時，可以通過v-on的形式監(jiān)聽自定義事件。

3）自定義事件傳參

在調用this.$emit()方法觸發(fā)自定義事件時，可以通過第2個參數(shù)為自定義事件傳參。

4. 組件上的v-model

1）在組件上使用v-model

v-model是雙向數(shù)據(jù)綁定指令，當需要維護組件內外數(shù)據(jù)的同步時，可以在組件上使用v-model指令。

• 外界數(shù)據(jù)的變化會自動同步到counter組件中
• counter組件中數(shù)據(jù)的變化，也會自動同步到外界

2）在組件上使用v-model的步驟

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論