建站
咨詢
售后
建站咨詢
新聞中心
#概覽
就變化內(nèi)容而言，此部分屬于高階內(nèi)容：
在江油等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站建設(shè)、網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作按需開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計(jì),營(yíng)銷型網(wǎng)站建設(shè),外貿(mào)營(yíng)銷網(wǎng)站建設(shè),江油網(wǎng)站建設(shè)費(fèi)用合理。
- 非兼容：用于自定義組件時(shí)，
v-modelprop 和事件默認(rèn)名稱已更改：- prop：
value->modelValue； - event：
input->update:modelValue；
- prop：
- 非兼容：
v-bind的.sync修飾符和組件的model選項(xiàng)已移除，可用v-model作為代替；
- 新增：現(xiàn)在可以在同一個(gè)組件上使用多個(gè)
v-model進(jìn)行雙向綁定；
- 新增：現(xiàn)在可以自定義
v-model修飾符。
更多信息，請(qǐng)見下文。
#介紹
在 Vue 2.0 發(fā)布后，開發(fā)者使用 v-model 指令必須使用為 value 的 prop。如果開發(fā)者出于不同的目的需要使用其他的 prop，他們就不得不使用 v-bind.sync。此外，由于v-model 和 value 之間的這種硬編碼關(guān)系的原因，產(chǎn)生了如何處理原生元素和自定義元素的問題。
在 Vue 2.2 中，我們引入了 model 組件選項(xiàng)，允許組件自定義用于 v-model 的 prop 和事件。但是，這仍然只允許在組件上使用一個(gè) model。
在 Vue 3 中，雙向數(shù)據(jù)綁定的 API 已經(jīng)標(biāo)準(zhǔn)化，減少了開發(fā)者在使用 v-model 指令時(shí)的混淆并且在使用 v-model 指令時(shí)可以更加靈活。
#2.x 語(yǔ)法
在 2.x 中，在組件上使用 v-model 相當(dāng)于綁定 value prop 和 input 事件：
如果要將屬性或事件名稱更改為其他名稱，則需要在 ChildComponent 組件中添加 model 選項(xiàng)：
// ChildComponent.vue
export default {
model: {
prop: 'title',
event: 'change'
},
props: {
// 這將允許 `value` 屬性用于其他用途
value: String,
// 使用 `title` 代替 `value` 作為 model 的 prop
title: {
type: String,
default: 'Default title'
}
}
} 所以，在這個(gè)例子中 v-model 的簡(jiǎn)寫如下：
#使用 v-bind.sync
在某些情況下，我們可能需要對(duì)某一個(gè) prop 進(jìn)行“雙向綁定”(除了前面用 v-model 綁定 prop 的情況)。為此，我們建議使用 update:myPropName 拋出事件。例如，對(duì)于在上一個(gè)示例中帶有 title prop 的 ChildComponent，我們可以通過(guò)下面的方式將分配新 value 的意圖傳達(dá)給父級(jí)：
this.$emit('update:title', newValue)如果需要的話，父級(jí)可以監(jiān)聽該事件并更新本地 data property。例如：
為了方便起見，我們可以使用 .sync 修飾符來(lái)縮寫，如下所示：
#3.x 語(yǔ)法
在 3.x 中，自定義組件上的 v-model 相當(dāng)于傳遞了 modelValue prop 并接收拋出的 update:modelValue 事件：
#v-model 參數(shù)
若需要更改 model 名稱，而不是更改組件內(nèi)的 model 選項(xiàng)，那么現(xiàn)在我們可以將一個(gè) argument 傳遞給 model：
這也可以作為 .sync 修飾符的替代，而且允許我們?cè)谧远x組件上使用多個(gè) v-model。
#v-model 修飾符
除了像 .trim 這樣的 2.x 硬編碼的 v-model 修飾符外，現(xiàn)在 3.x 還支持自定義修飾符：
我們可以在 Custom Events 部分中了解有關(guān)自定義 v-model 修飾符的更多信息。
#遷移策略
我們推薦：
- 檢查你的代碼庫(kù)中所有使用
.sync的部分并將其替換為v-model：
- 對(duì)于所有不帶參數(shù)的
v-model，請(qǐng)確保分別將 prop 和 event 命名更改為modelValue和update:modelValue
// ChildComponent.vue
export default {
props: {
modelValue: String // 以前是`value：String`
},
methods: {
changePageTitle(title) {
this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
}
}
}#下一步
更多新的 v-model 語(yǔ)法相關(guān)信息，請(qǐng)參考：
- 在組件中使用
v-model v-model參數(shù)- 處理
v-model修飾符
分享名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0v-model
URL分享：http://www.5511xx.com/article/dpoojec.html
