<!-- 父組件 -->
<template>
    <Child v-model="value" />
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>
<!-- 子組件 -->
<template>
    <input v-model="input" />
</template>
<script>
export default {
  props: {
    value: String,
  },
  model: {
    prop: 'value',        // 指定 v-model 要綁定的參數(shù)叫什么名字，來(lái)自于 props 中定義的參數(shù)
    event: 'change',    // 指定要觸發(fā)的事件名字，將被用于 $emit
  },
  computed: {
    input: {
      // 這里的計(jì)算屬性使用了 getter、setter，可以簡(jiǎn)化代碼
      // 可參見(jiàn)鏈接 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);    // 觸發(fā)
      }
    }
  }
}
</script>

<!-- 父組件 -->
<template>
    <Child :value.sync="value" />
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>
<!-- 子組件 Child -->
<template>
    <input v-model="input" />
</template>
<script>
export default {
  props: {
    value: String,
  },
  computed: {
    input: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('update:value', val);    // 這里的事件名字一定是 'update:' + prop的名字
      }
    }
  }
}
</script>

<!-- 父組件 -->
<template>
  <!-- 定義了兩個(gè)v-bind:xxx.sync來(lái)實(shí)現(xiàn)兩個(gè)雙向綁定 -->
  <ModalInput :value.sync="value" :show.sync="show" />
</template>
<script>
export default {
  data() {
    return {
      value: '',
      show: false
    }
  }
}
</script>
<!-- 子組件 ModalInput -->
<template>
  <!-- 這里假設(shè)Modal是一個(gè)帶“確認(rèn)”按鈕，點(diǎn)擊觸發(fā)confirm事件，并利用v-model來(lái)控制展示的模態(tài)框 -->
  <Modal v-model="showModal" @confirm="onConfirm">
    <input v-model="input">
  </Modal>
</template>
<script>
export default {
  props: {
    value: String,
    show: Boolean,
  },
  data() {
    return {
      input: ''        // 在這個(gè)例子中，使用 data 來(lái)聲明 input，
                  // 因?yàn)橹挥性邳c(diǎn)擊了“確認(rèn)”按鈕后，才要把值傳給父組件（而不是實(shí)時(shí)傳）
    }
  },
  computed: {
    showModal: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit('update:show', val);
      }
    }
  },
  methods: {
    onConfirm() {
      this.$emit('update:value', this.input);
      this.showModal = false
    }
  }
}
</script>

<!-- 父組件 -->
<template>
  <UserInfoForm v-bind.sync="inputs" />
</template>
<script>
export default {
  data() {
    return {
      inputs: {
        name: '',
        age: 0,
        addr: '',
        phone: ''
      }
    }
  }
}
</script>
<!-- 子組件 UserInfoForm -->
<template>
  <form>
    <input v-model="name">
    <input v-model.number="age">
    <input v-model="addr">
    <input v-model="phone">
  </form>
</template>
<script>
// 與上面例子實(shí)現(xiàn)方式相似，這里省略代碼若干行。。。
// 其實(shí)就是聲明入?yún)?props 有哪些
// 用 computed 來(lái)聲明各個(gè)變量的 getter 和 setter
// getter 返回傳進(jìn)來(lái)的 prop，setter 中觸發(fā) update:xxxx 事件
</script>