#概覽

就變化內(nèi)容而言，此部分屬于高階內(nèi)容：

在江油等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供網(wǎng)站建設、網(wǎng)站制作 網(wǎng)站設計制作按需開發(fā),公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,高端網(wǎng)站設計,營銷型網(wǎng)站建設,外貿(mào)營銷網(wǎng)站建設,江油網(wǎng)站建設費用合理。

• 非兼容：用于自定義組件時，v-modelprop 和事件默認名稱已更改：
  • prop：value -> modelValue；
  • event：input -> update:modelValue；

• 非兼容：v-bind 的 .sync 修飾符和組件的 model 選項已移除，可用 v-model 作為代替；

• 新增：現(xiàn)在可以在同一個組件上使用多個 v-model 進行雙向綁定；

• 新增：現(xiàn)在可以自定義 v-model 修飾符。

更多信息，請見下文。

#介紹

在 Vue 2.0 發(fā)布后，開發(fā)者使用 v-model 指令必須使用為 value 的 prop。如果開發(fā)者出于不同的目的需要使用其他的 prop，他們就不得不使用 v-bind.sync。此外，由于v-model 和 value 之間的這種硬編碼關系的原因，產(chǎn)生了如何處理原生元素和自定義元素的問題。

在 Vue 2.2 中，我們引入了 model 組件選項，允許組件自定義用于 v-model 的 prop 和事件。但是，這仍然只允許在組件上使用一個 model。

在 Vue 3 中，雙向數(shù)據(jù)綁定的 API 已經(jīng)標準化，減少了開發(fā)者在使用 v-model 指令時的混淆并且在使用 v-model 指令時可以更加靈活。

#2.x 語法

在 2.x 中，在組件上使用 v-model 相當于綁定 value prop 和 input 事件：

如果要將屬性或事件名稱更改為其他名稱，則需要在 ChildComponent 組件中添加 model 選項：

// ChildComponent.vue


export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 這將允許 `value` 屬性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作為 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

所以，在這個例子中 v-model 的簡寫如下：

#使用 v-bind.sync

在某些情況下，我們可能需要對某一個 prop 進行“雙向綁定”(除了前面用 v-model 綁定 prop 的情況)。為此，我們建議使用 update:myPropName 拋出事件。例如，對于在上一個示例中帶有 title prop 的 ChildComponent，我們可以通過下面的方式將分配新 value 的意圖傳達給父級：

this.$emit('update:title', newValue)

如果需要的話，父級可以監(jiān)聽該事件并更新本地 data property。例如：

為了方便起見，我們可以使用 .sync 修飾符來縮寫，如下所示：

#3.x 語法

在 3.x 中，自定義組件上的 v-model 相當于傳遞了 modelValue prop 并接收拋出的 update:modelValue 事件：

#v-model 參數(shù)

若需要更改 model 名稱，而不是更改組件內(nèi)的 model 選項，那么現(xiàn)在我們可以將一個 argument 傳遞給 model：

這也可以作為 .sync 修飾符的替代，而且允許我們在自定義組件上使用多個 v-model。

#v-model 修飾符

除了像 .trim 這樣的 2.x 硬編碼的 v-model 修飾符外，現(xiàn)在 3.x 還支持自定義修飾符：

我們可以在 Custom Events 部分中了解有關自定義 v-model 修飾符的更多信息。

#遷移策略

我們推薦：

• 檢查你的代碼庫中所有使用 .sync 的部分并將其替換為 v-model：

• 對于所有不帶參數(shù)的 v-model，請確保分別將 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 語法相關信息，請參考：

• 在組件中使用 v-model
• v-model 參數(shù)
• 處理 v-model 修飾符

分享標題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0v-model
文章地址：http://uogjgqi.cn/article/dpoojec.html