vue如何實現數據的雙向綁定

小編給大家分享一下vue如何實現數據的雙向綁定，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

實現數據的雙向綁定，方便維護數據

有很多這樣的場景，父組件需要傳遞數據給子組件，且在子組件觸發數據更新的時候，馬上反饋給父組件，父組件數據更新，單向數據流向子組件，最后子組件更新。通常情況用 props + $emit 的方式去更新狀態，但是這種處理方式有點笨拙，且不易維護，所以可以通過實現數據的“雙向綁定”來提高代碼的可維護性。可以通過這以下方式去實現：

使用 .sync 實現 Prop 的“雙向綁定”

在 v-bind prop的時候添加  .sync 修飾符，賦新值的時候用  this.$emit('update:propName', newValue)

<!-- .sync是 v-on:update這種模式的一種縮寫 -->
<Child v-on:update:title="title" />
<!-- 相當于 -->
<Child :title.sync="title" />

如果要更新上述代碼中的 title 值，只需要   this.$emit('update:title', '新標題')，完成數據更新。

使用 model 選項

model 是2.2.0+ 新增的選項，一個組件上的 v-model 默認會利用名為 value  的 Prop  和名為 input 的事件， 而 model 選項可以規定 Prop 名稱和事件名稱來實現 v-model，好處是在實現 v-model 的同時也避免了 Prop 和事件名的沖突。

<!-- 父組件 -->
<Model v-model="checked"/>

<!-- Model組件 -->
<div @click="handleClick">
  <p>自定義組件的 v-model</p>
  checked {{checked}}
</div>
<script lang="ts">
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  methods: {
    handleClick() {
      this.$emit('change', !this.checked);
    }
  }

在上述代碼中，只需要在 model 選項中添加 prop 和 event，就可以實現了 v-model。而在 Vue + TS 項目中 vue-property-decorator 中提供了 Model 的裝飾器，需要這么寫：

@Model('change', { type: Boolean }) readonly checked!: boolean
handleClick() {
  this.$emit('change', !this.checked);
}

只需要通過 .sync 和 model 就可以實現數據的“雙向綁定”，這樣書寫代碼可以一定程度上減少我們的代碼，而且另代碼變得更優雅且可維護。

看完了這篇文章，相信你對“vue如何實現數據的雙向綁定”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！