1. props驗(yàn)證

1）props驗(yàn)證

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

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

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

使用對象類型的props節(jié)點(diǎn)，可以對每個(gè)prop進(jìn)行數(shù)據(jù)類型的校驗(yàn)。

<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驗(yàn)證

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

• 基礎(chǔ)的類型檢查
• 多個(gè)可能的類型
• 必填項(xiàng)校驗(yàn)
• 屬性默認(rèn)值
• 自定義驗(yàn)證函數(shù)

①基礎(chǔ)的類型檢查

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

②多個(gè)可能的類型

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

③必填項(xiàng)校驗(yàn)

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

④屬性默認(rèn)值

在封裝組件時(shí)，可以為某個(gè)prop屬性指定默認(rèn)值。

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

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

2. 計(jì)算屬性

1）計(jì)算屬性

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

2）聲明計(jì)算屬性

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

計(jì)算屬性側(cè)重于得到一個(gè)計(jì)算的結(jié)果，因此計(jì)算屬性中必須有return返回值。

3）計(jì)算屬性的使用注意點(diǎn)

• 計(jì)算屬性必須定義在computed節(jié)點(diǎn)中
• 計(jì)算屬性必須是一個(gè)function函數(shù)
• 計(jì)算屬性必須有返回值
• 計(jì)算屬性必須當(dāng)做普通屬性使用

4）計(jì)算屬性和方法

相對于方法來說，計(jì)算屬性會(huì)緩存計(jì)算的結(jié)果，只有計(jì)算屬性的依賴項(xiàng)發(fā)生變化時(shí)，才會(huì)重新進(jìn)行運(yùn)算，因此相對來說計(jì)算屬性的性能更好。

  <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() {
            // 計(jì)算屬性會(huì)緩存計(jì)算的結(jié)果
            console.log('計(jì)算屬性被執(zhí)行了');
            return this.count*2;
        }
    }

3. 自定義事件

1）自定義事件

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

2）自定義事件的3個(gè)使用步驟

在封裝組件時(shí)：

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

在使用組件時(shí)：

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

①聲明自定義事件

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

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

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

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

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

3）自定義事件傳參

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

4. 組件上的v-model

1）在組件上使用v-model

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

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

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論