Vue.sync修飾符與this.$emit('update:xxx', newXXX)

一、.sync修飾符的作用

Vue中的數據是單向數據流：父級 prop 的更新會向下流動到子組件中，但是反過來則不行，即子組件無法直接修改父組件中的數據。
但我們常常會遇到需要在子組件中修改父組件數據的場景。.sync修飾符就可以幫助我們實現這種功能。

.sync 修飾符    this.$emit('update:title', newTitle)

Vue通過prop進行雙向數據綁定。子組件數據變化，一般只能通過 this.$emit(func, val) 回調父組件函數來傳值給父組件。

Vue2.3版本引入sync，作為一個事件綁定語法糖，當子組件觸發事件時，父組件會響應事件並實現數據更新。

二、不使用.sync修飾符的寫法

父組件：

<template>
  <div>
      <parent-comp :is-show="detailVisible" @update:isShow="func" /> 
  </div>
</template>

<script>
export default {
  methods: {
    func (val) {
        this.detailVisible = val
    }
  }
}
</script>

子組件： 

onClose () {
     this.$emit('update:isShow', false)
 }

注意：this.$emit()中update后的字段要與父組件中保持一致

三、使用.sync修飾符的寫法

父組件：

<parent-comp :visible.sync="isShow"></parent-comp>

子組件： 

props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 子組件觸發函數
    handleClose() {
      this.$emit('update:visible', false)
    }
  }