2種方式實現vue自定義組件v-model

1. 使用value+input事件

默認情況下，一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event

<!-- parent -->
<template>
  <div class="parent">
    <p>我是父親, 對兒子說： {{ sthGiveChild }}</p>
    <button @click="changeChild">xxxx</button>

    <child v-model="sthGiveChild"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  data() {
    return {
      sthGiveChild: '給你100塊',
    }
  },
  components: {
    child,
  },
  methods: {
    changeChild() {
      this.changeChild = '給你1000塊'
    },
  },
}
</script>

<!-- child -->
<template>
  <div class="child">
    <p>我是兒子，父親對我說： {{ value }}</p>
    <a href="javascript:;" rel="external nofollow" @click="returnBackFn"
      >回應</a
    >
  </div>
</template>
<script>
export default {
  name: 'Child',
  props: {
    value: String,
  },
  methods: {
    returnBackFn() {
      this.$emit('input', '還你200塊')
    },
  },
}
</script>

2. 使用model自定義事件和prop

這種方式和第一種效果一樣，但是一些輸入類型比如單選框和復選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以回避這些情況產生的沖突。

<!-- child -->
<template>
  <div class="child">
    <p>我是兒子，父親對我說： {{ give }}</p>
    <a href="javascript:;" rel="external nofollow" @click="returnBackFn"
      >回應</a
    >
  </div>
</template>
<script>
export default {
  name: 'Child',
  props: {
    give: String,
  },
  model: {
    prop: 'give',
    event: 'returnBack',
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '還你200塊')
    },
  },
}
</script>