###### tags: `Vue`

# Vue - 組件溝通 : .sync修飾符 及 v-model

在Vue的世界，做父子組件的資料的綁定我們會使用兩個步驟
1. 父 -> 子 : 父組件將值props給子組件
2. 子 -> 父 : 子組件調用內建的$emit方法並傳入事件名稱來觸發一個事件，父組件接收該事件並更新值

### 範例

###### Parent Componet

<template>
  <div>
      <ChildComponent :value="parentValue" @updateValue="updateValue"/>
  </div>
</template>

<script>
export default {
  data() {
      return {
          parentValue:'init'
    }
  },
  methods:{
      updateValue(value) {
          this.parentValue = value
      }
  }
}
</script>

###### Child Componet

<template>
  <div @click="updateValue">
</template>

<script>
export default {
  props: ['parentValue'],
  methods:{
      updateValue() {
          this.$emit('updateValue', 'anyValue')
      }
  }
}
</script>

## .sync修飾符

使用範例的code，改寫為.sync修飾符的方法

1. 在父組件中，將子組件props後面加上.sync修飾符，並將子組件原本監聽事件移除
2. 在子組件中，$emit事件名稱必須為'update:要被更新的props',

### 範例

###### Parent Componet

<template>
  <div>
      <ChildComponent :value.sync="parentValue" />
  </div>
</template>

<script>
export default {
  data() {
      return {
          parentValue:'init'
    }
  }
}
</script>

###### Child Componet

<template>
  <div @click="$emit('update:parentValue', 'anyValue')">
</template>

<script>
export default {
  props: ['parentValue'],
}
</script>

**.sync 修飾符其實就只是個語法糖，本質父子組件的傳遞方式是一樣的**

<ChildComponent :value.sync="parentValue" />

實質上code等於以下

<ChildComponent 
    :value="parentValue"
    @update:parentValue="value => { parentValue = value }" 
/>

若用一個物件同時設置多個props，可以將.sync修飾符和v-bind配合使用

<ChildComponent v-bind.sync="object" />

## v-model

接下來討論大家都很熟悉的v-model，在表單組件的時候，我們很習慣的使用v-model做雙向綁定，但其實v-model也是個語法糖

<input v-model="value"/>

實質上code等於以下

<input :value="parentValue" @input= value => { parentValue = value  }/>

看上去是不是很像.sync呢?
v-model 預設會props value 並監聽 input事件

但其實v-model的預設是可以做更改的，但我認為不建議去做更改，以免造成同事或未來自己看code的困惑

model: {
    prop: 'propName',
    event: 'eventName'
  },

## 參考連結

* [Vue - .sync Modifier](https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)
* [Vue - API model](https://vuejs.org/v2/api/#model)