vue 在组件中自定义v-model

先来个官方解释
自定义组件的 v-model

我们来实践一下：

在子组件中：

<template>
  <div>
    <button @click="sub">-</button>
    子组件的count:{{ count }}
    <button @click="add">+</button>
  </div>
</template>

<script>
export default {
  name: '',

  components: {},

  model: {
    prop: 'count', // 定义传递给v-model的那个变量，绑定到哪个属性值上
    event: 'change-count'// event:什么时候触发v-model行为 
  },

  props: {
    // 需要在组件的 props 选项里声明 count 这个 prop
    count: {
      type: Number,
      default: 0
    }
  },
  
  methods: {
    sub() {
      this.$emit('change-count', this.count - 1)
    },
    add() {
      this.$emit('change-count', this.count + 1)
    }
  }
}
</script>

在子组件中，我们更改了model的选项prop: 'count'、event: 'change-count'，如果默认不更改的话，那么model的默认值将是

model: {
    prop: 'value', 
    event: 'input' 
  },

这里的prop的值应该在组件的prop定义，所以我们在prop里面定义了count

 props: {
    count: {
      type: Number,
      default: 0
    }
  },

触发事件需要用到$emit，然后根据自己定义的事件更新值即可

this.$emit('change-count', this.count - 1)

然后在父组件中使用就简单很多了，只需要绑定一个变量即可：

<template>
  <div class="test">
    父组件的goodCount:{{ goodCount }}
    <stepper v-model="goodCount" />
  </div>
</template>

<script>
import Stepper from './components/Stepper'
export default {
  name: 'Test',

  components: { Stepper },

  props: {},

  data() {
    return {
      goodCount: 0
    }
  }
}
</script>

然后我们通过观察就可以知道实现了组件的双向数据绑定了

再举个例子给大家试一下

<template>
  <div>
    <input :count="count" type="text" @input="$emit('input',$event.target.value)">
  </div>
</template>

<script>
export default {
  name: '',

  components: {},

  model: {
    prop: 'count', // event:什么时候触发v-model行为
    event: 'input' // 定义传递给v-model的那个变量，绑定到哪个属性值上
  },

  props: {
    // 需要在组件的 props 选项里声明 count 这个 prop
    count: {
      type: null,
      default: ''
    }
  }
</script>