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

 

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

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

 

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

父組件： 

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

 

子組件： 

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