Vue.js v-model双向数据绑定的自定义用法，告别一成不变！

前端

2023-09-15 09:08:06

自定义 Vue.js v-model：提升组件灵活性和可重用性

什么是 v-model 双向数据绑定？

在 Vue.js 中，v-model 是一个神奇的指令，允许在组件之间轻松实现双向数据绑定。它基本上通过以下步骤工作：

子组件监听输入事件并通过 $emit 触发一个事件，传递更新的值。
父组件监听这个事件，更新其数据状态。
父组件再次通过 props 将更新后的值传递给子组件。

自定义 v-model 的优势

与其使用内置的 v-model，自定义 v-model 提供了以下优势：

增强组件可重用性： 通过自定义 v-model，您可以创建可根据不同场景调整的通用组件。
提高组件灵活性： 自定义 v-model 允许您根据需要调整行为，实现更复杂的功能。
增强组件扩展性： 通过扩展自定义 v-model，您可以轻松添加新功能，使其更全面。

如何自定义 v-model？

自定义 v-model 涉及两个步骤：

在子组件中定义一个自定义 v-model 指令： 使用 Vue.directive() 方法监听输入事件并触发更新事件。
在父组件中使用自定义 v-model 指令： 使用一个数据属性来存储子组件的值，并使用自定义 v-model 指令将其绑定到子组件的输入元素。

示例：自定义一个数字输入框 v-model

<!-- 子组件：NumberInput.vue -->
<template>
  <input type="number" v-model="currentValue">
</template>

<script>
export default {
  props: ['value'],
  directives: {
    model: {
      bind(el, binding, vnode) {
        el.addEventListener('input', (e) => {
          binding.value(parseInt(e.target.value))
        })
      },
      update(el, binding, vnode) {
        el.value = binding.value
      },
      unbind(el, binding, vnode) {
        el.removeEventListener('input', (e) => {
          binding.value(parseInt(e.target.value))
        })
      }
    }
  }
}
</script>

<!-- 父组件：App.vue -->
<template>
  <number-input v-model="numberValue"></number-input>
</template>

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

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