vue中sync修飾符怎么用

小編給大家分享一下vue中sync修飾符怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

.sync 修飾符

如果你使用過 Vue.js 1.x，一定對 .sync 不陌生。在 1.x 里，可以使用 .sync 雙向綁定數據，也就是父組件或子組件都能修改這個數據，是雙向響應的。在 Vue.js 2.x 里廢棄了這種用法，目的是盡可能將父子組件解耦，避免子組件無意中修改了父組件的狀態。

不過在 Vue.js 2.3.0 版本，又增加了 .sync 修飾符，但它的用法與 1.x 的不完全相同。2.x 的 .sync 不是真正的雙向綁定，而是一個語法糖，修改數據還是在父組件完成的，并非在子組件。

仍然是數字選擇器的示例，這次不用 v-model，而是用 .sync，可以這樣改寫：

<template>
  <div>
    <button @click="increase(-1)">減 1</button>
    <span >{{ value }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: 'InputNumber',
    props: {
      value: {
        type: Number
      }
    },
    methods: {
      increase (val) {
        this.$emit('update:value', this.value + val);
      }
    }
  }
</script>

用例：

<template>
  <InputNumber :value.sync="value" />
</template>
<script>
  import InputNumber from '../components/input-number/input-number.vue';

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

看起來要比 v-model 的實現簡單多，實現的效果是一樣的。v-model 在一個組件中只能有一個，但 .sync 可以設置很多個。.sync 雖好，但也有限制，比如：

• 不能和表達式一起使用（如 v-bind:title.sync="doc.title + '!'" 是無效的）；

• 不能用在字面量對象上（如 v-bind.sync="{ title: doc.title }" 是無法正常工作的）。

以上是“vue中sync修飾符怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！