vue3.0-props、computed、自定義事件方式

Posted on by

1. props驗證

1）props驗證

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

使用數組類型的props節點的缺點：無法為每個prop指定具體的數據類型。

2）對象類型的props節點

使用對象類型的props節點，可以對每個prop進行數據類型的校驗。

<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節點提供瞭多種數據驗證方案，例如：

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

①基礎的類型檢查

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

②多個可能的類型

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

③必填項校驗

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

④屬性默認值

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

⑤自定義驗證函數

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

2. 計算屬性

1）計算屬性

計算屬性本質上就是一個function函數，它可以實時監聽data中數據的變化，並return一個計算後的新值，供組件渲染DOM時使用。

2）聲明計算屬性

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

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

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

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

4）計算屬性和方法

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

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

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

 

3. 自定義事件

1）自定義事件

在封裝組件時，為瞭讓組件的使用者可以監聽到組件內狀態的變化，此時需要用到組件的自定義事件。

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

在封裝組件時：

  • 聲明自定義事件
  • 觸發自定義事件

在使用組件時：

1.監聽自定義事件

①聲明自定義事件

開發者為自定義組件封裝的自定義事件，必須是現在emits節點中聲明。

②觸發自定義事件

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

③監聽自定義事件

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

3）自定義事件傳參

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

4. 組件上的v-model

1）在組件上使用v-model

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

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

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

   

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：