vue如何實(shí)現(xiàn)數(shù)據(jù)的雙向綁定

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

實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，方便維護(hù)數(shù)據(jù)

有很多這樣的場景，父組件需要傳遞數(shù)據(jù)給子組件，且在子組件觸發(fā)數(shù)據(jù)更新的時候，馬上反饋給父組件，父組件數(shù)據(jù)更新，單向數(shù)據(jù)流向子組件，最后子組件更新。通常情況用 props + $emit 的方式去更新狀態(tài)，但是這種處理方式有點(diǎn)笨拙，且不易維護(hù)，所以可以通過實(shí)現(xiàn)數(shù)據(jù)的“雙向綁定”來提高代碼的可維護(hù)性?？梢酝ㄟ^這以下方式去實(shí)現(xiàn)：

使用 .sync 實(shí)現(xiàn) Prop 的“雙向綁定”

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

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

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

使用 model 選項(xiàng)

model 是2.2.0+ 新增的選項(xiàng)，一個組件上的 v-model 默認(rèn)會利用名為 value  的 Prop  和名為 input 的事件， 而 model 選項(xiàng)可以規(guī)定 Prop 名稱和事件名稱來實(shí)現(xiàn) v-model，好處是在實(shí)現(xiàn) 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 選項(xiàng)中添加 prop 和 event，就可以實(shí)現(xiàn)了 v-model。而在 Vue + TS 項(xiàng)目中 vue-property-decorator 中提供了 Model 的裝飾器，需要這么寫：

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

只需要通過 .sync 和 model 就可以實(shí)現(xiàn)數(shù)據(jù)的“雙向綁定”，這樣書寫代碼可以一定程度上減少我們的代碼，而且另代碼變得更優(yōu)雅且可維護(hù)。

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