學習要點：
1.雙向綁定
2.組件雙向
本節課我們來開始學習 Vue3.x 的組件使用雙向綁定的方法。
一．雙向綁定
1. 首先，回顧一下雙向綁定的使用方法，使用 v-model 即可實現；
<input type="text" v-model="message">
PS：雙向綁定即可實現內容的響應式更新；
2. 當然，它的原理就是通過 input 事件來進行內容的替換，如果改成完全形式如下：
<input type="text" v-bind:value="message"
v-on:input="message = $event.target.value">
PS：通過 input 事件來獲取輸入的值，再賦值給 message，而再通過 v-bind 更新值；
二．組件雙向
1. 首先，在組件調用的地方改寫成如下格式：
<html-a v-model:parent-message="message">html-a>
PS：將 v-bind:改成 v-model 即雙向綁定，而模板內部需要綁定對應的父組件屬性；
2. 然后，根據第一個要點的寫法，我們編寫相應的 input 代碼；
// 模板
template : `
v-bind:value="parentMessage"
v-on:input="$emit('update:parentMessage',
$event.target.value)">
`
PS：這里通過觸發 input 事件來執行自定義事件，并拋出數據；
3. 也可以通過計算屬性中的 get()和 set()來改寫組件中的雙向綁定；
template : `
`
// 計算屬性
computed : {
value : {
get() {
return this.parentMessage
},
set(value) {
this.$emit('update:parentMessage', value)
}
}
}
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
