为 Vue 3 设计一个自定义 `v-model`

2024-02-04 17:26:42

前言

在 Vue 中，v-model 是一个内置指令，用于在表单元素和 Vue 组件之间创建双向绑定。这意味着当用户在表单元素中输入内容时，Vue 组件中的数据将相应更新，反之亦然。然而，有时您可能需要创建一个自定义的 v-model，以满足您的特定需求。

创建自定义 `v-model`

定义 v-model 指令

首先，您需要定义一个 v-model 指令。该指令将接收一个值作为参数，该值将绑定到组件的数据。例如：

export default {
  directives: {
    vModel: {
      bind(el, binding) {
        el.value = binding.value;
      },
      update(el, binding) {
        el.value = binding.value;
      }
    }
  }
}

使用自定义 v-model

现在，您可以在组件中使用自定义 v-model 指令。例如：

<input v-model="message">

当用户在 <input> 元素中输入内容时，message 数据将相应更新。

将 `v-model` 提取为 hooks

为了使自定义 v-model 更具可重用性，您可以将其提取为一个 hooks。这样，您就可以在多个组件中使用它。例如：

export default function useVModel() {
  const bind = (el, binding) => {
    el.value = binding.value;
  }

  const update = (el, binding) => {
    el.value = binding.value;
  }

  return {
    bind,
    update
  }
}

然后，您可以在组件中使用 hooks：

import useVModel from './useVModel';

export default {
  setup() {
    const vModel = useVModel();

    return {
      vModel
    }
  },
  template: `
    <input v-model="vModel">
  `
}