手機: 18919834768
電話熱線: 0931-7603702
網站知識
當前位置: 主頁 > 網站知識

vue3組件雙向綁定

發布時間:2023-03-02 16:39:54???來自:未知???編輯:蘭州啟點網絡 www.ing-cap.com.cn

學習要點:
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)">
{{parentMessage}}
{{message}}
`
PS:這里通過觸發 input 事件來執行自定義事件,并拋出數據;
3. 也可以通過計算屬性中的 get()set()來改寫組件中的雙向綁定;
template : `
`
// 計算屬性
computed : {
value : {
get() {
return this.parentMessage
},
set(value) {
this.$emit('update:parentMessage', value)
}
}
}
本文由:蘭州啟點網絡(www.ing-cap.com.cn)整理發布!

? QQ咨詢

建站咨詢 售前咨詢 私人訂制 售后技術

? 電話咨詢

0931-7603702
(早9:00-晚10:00)

? 微信咨詢

掃碼關注
點點租

? 返回頂部
国产精品va无码二区_国产肥熟女视频一区二区三区_欧美亚洲另类在线一区_日韩亚洲中文字幕