props驗證

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

使用數組類型的 props 節點的缺點是無法為每個 prop 指定具體的數據類型。
使用對象類型的 props 節點，可以對每個 prop 進行數據類型的校驗，

驗證方法：

對象類型的 props 節點提供了多種數據驗證方案，例如：
① 基礎的類型檢查
② 多個可能的類型
③ 必填項校驗
④ 屬性默認值
⑤ 自定義驗證函數

export default {props: {// 基礎類型檢查//（給出 `null` 和 `undefined` 值則會跳過任何類型檢查）propA: Number,// 多種可能的類型propB: [String, Number],// 必傳，且為 String 類型propC: {type: String,required: true},// Number 類型的默認值propD: {type: Number,default: 100},// 對象類型的默認值propE: {type: Object,// 對象或者數組應當用工廠函數返回。// 工廠函數會收到組件所接收的原始 props// 作為參數default(rawProps) {return { message: 'hello' }}},// 自定義類型校驗函數// 在 3.4+ 中完整的 props 作為第二個參數傳入propF: {validator(value, props) {// The value must match one of these stringsreturn ['success', 'warning', 'danger'].includes(value)}},// 函數類型的默認值propG: {type: Function,// 不像對象或數組的默認，這不是一個// 工廠函數。這會是一個用來作為默認值的函數default() {return 'Default function'}}}
}

計算屬性

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

聲明計算屬性

為什么需要計算屬性：

表達式雖然方便，但也只能用來做簡單的操作。如果在模板中寫太多邏輯，會讓模板變得臃腫，難以維護。使用計算屬性直接返回計算后的結果，使得邏輯主要在函數里處理，模板會更簡潔。
① 計算屬性必須定義在 computed 節點中
② 計算屬性必須是一個 function 函數
③ 計算屬性必須有返回值
④ 計算屬性必須當做普通屬性使用

計算屬性與方法

計算屬性值會基于其響應式依賴被緩存。一個計算屬性僅會在其響應式依賴更新時才重新計算。相比之下，方法調用總是會在重渲染發生時再次執行函數。

官方文檔補充

https://cn.vuejs.org/guide/essentials/computed

監聽事件

什么監聽事件

在封裝組件時，為了讓組件的使用者可以監聽到組件內狀態的變化，（比如父子組件之間）此時需要用到組件的監聽事件。

如何使用監聽事件

父組件監聽

可以通過 v-on 或 @ 來選擇性地監聽子組件上拋的事件，就像監聽原生 DOM 事件那樣：

  <BlogPost@enlarge-text="postFontSize += 0.1"/>

子組件聲明與調用

聲明：
可以通過 emits 選項來聲明需要拋出的事件：

<!-- BlogPost.vue -->
<script>
export default {props: ['title'],emits: ['enlarge-text']
}
</script>

調用
（1）可以直接通過綁定點擊事件觸發

   <button @click="$emit('enlarge-text')">Enlarge text</button>

（2）也可以通過函數中調用this.$emit 觸發

 methods:{test(){this.$emit('enlarge-text')}}<button @click="test">Enlarge text</button>

參數傳遞

所有傳入 $emit()的額外參數都會被直接傳向監聽器。舉例來說，$emit(‘foo’, 1, 2, 3) 觸發后，監聽器函數將會收到這三個參數值。

父組件中監聽事件，我們可以先簡單寫一個內聯的箭頭函數作為監聽器，此函數會接收到事件附帶的參數：

<MyButton @increase-by="(n) => count += n" />

也可以用一個組件方法來作為事件處理函數,該方法也會接收到事件所傳遞的參數：

 <MyButton @increase-by="increaseCount" />methods: {increaseCount(n) {this.count += n}}

更多案例

https://cn.vuejs.org/guide/components/events.html#event-arguments

todolist demo

使用element-plus + vue實現的 todo list demo 主要邏輯在代碼文件中
https://github.com/nebofeng/Vue3_demo/tree/master/02-todolist

IT 內容具有時效性，未避免更新后未同步，請點擊查看最新內容:Vue3-04_組件基礎_下
文章首發于:https://nebofeng.com/2024/06/28/vue3-04_%e7%bb%84%e4%bb%b6%e5%9f%ba%e7%a1%80_%e4%b8%8b/