自定组件轻松用v-model

2023-10-09 15:09:34

在上一篇文章中，我们深入探讨了 v-model 在表单用法中的应用，今天我们将把目光聚焦于它在自定义组件中的用法。

v-model 在自定义组件中的用法与在表单中的用法类似，它接收一个属性 modelValue 并触发一个事件 update:modelValue 来更新该值。

但要注意的是，由于组件是一个独立的、可重复使用的单元，因此它不应该直接修改父组件的状态。取而代之，它应该通过事件来通知父组件状态的变化。

为了演示自定义组件中 v-model 的用法，我们来构建一个简单的计数器组件。

定义一个名为 Counter.vue 的组件文件：

<template>
  <div>
    <button @click="count++">+</button>
    <span>{{ count }}</span>
    <button @click="count--">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

在父组件中使用 Counter 组件：

<template>
  <div>
    <counter v-model="count"></counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  components: {
    Counter
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>