vue自定义v-model

时间:2022-09-28 油箱上的葱花人气:0

前言

基础篇：简单介绍vue3的setup语法如何自定义v-model；
进阶篇：如何提取v-model语法作为一个公用hooks；

基础

基础篇可绕过，只是对于官网给出的教程，进行了总结概括并给出demo

基本的v-model

子组件中满足两个点，即可完成自定义双向绑定：

props中定义一个值xxx
emit中定义一个update:xxx事件

下面我们来写一个最基本的v-model组件：

props中定义一个modelValue值，并绑定到input的value属性上；
emit中定义一个update:modelValue事件

需要注意的是，当modelValue作为props传入，update:modelValue事件将被自动注册到emit事件中

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

<script setup>
const emit = defineEmits();
const props = defineProps({
  modelValue: String,
});
</script>

父组件中，引入modelComp子组件，并绑定test值到v-model上，test便完成了一次双向绑定。

<template>
  <modelComp v-model="test"></modelComp>
</template>

<script setup>
import { ref, watch } from "vue";
import modelComp from "./components/model/modelComp.vue";
const test = ref("");
</script>

这便是一个最基本的自定义v-model组件；

多个v-model绑定

当我们需要多个双向绑定时，如下：

<modelComp
  v-model="test"
  v-model:test1="test1"
  v-model:test2="test2"
></modelComp>

<script setup>
import { ref, watch } from "vue";
import modelComp from "./components/model/modelComp.vue";
const test = ref("");
const test1 = ref("");
const test2 = ref("");
</script>

子组件中，同样按着两个点来定义：

props中定义两个值，test1和test2
emits中定义两个事件，update:test1和update:test2

<template>
  <input
    type="text"
    @input="emit('update:modelValue', $event.target.value)"
    :value="props.modelValue"
  />
  <input
    type="text"
    @input="emit('update:test1', $event.target.value)"
    :value="props.test1"
  />
  <input
    type="text"
    @input="emit('update:test2', $event.target.value)"
    :value="props.test2"
  />
</template>

<script setup>
const emit = defineEmits(["update:modelValue","update:test1", "update:test2"]);
const props = defineProps({
  modelValue: String,
  test1: String,
  test2: String,
});
</script>

v-model修饰符

vue提供了一些v-model修饰符，我们可以在v-model中使用他们：

<modelComp
  v-model.trim="test"
  v-model:test1.lazy="test1"
  v-model:test2.trim.lazy="test2"
></modelComp>

在一些场景下，我们需要自己定义修饰符，来满足我们的需求，举个栗子：

<modelComp
  v-model.a="test"
  v-model:test1.b.c="test1"
></modelComp>

默认v-model中我们绑定了a修饰符，v-model:test1中则绑定b和c两个修饰符;

对于修饰符，我们需要满足以下条件：

对于默认v-model来说，需要props中定义两个值
- modelValue
- modelModifiers，接受修饰符key值
对于自定义v-model:xxx来说，props中：
- xxx
- xxxModeifiers，接受修饰符key值

由此，上代码：

<template>
  <input type="text" @input="vModelInput" :value="props.modelValue" />
  <input type="text" @input="vModelTest1" :value="props.test1" />
</template>

<script setup>
const emit = defineEmits(["update:modelValue", "update:test1"]);
const props = defineProps({
  modelValue: String,
  //接受v-model的修饰符
  modelModifiers: {
    default: () => ({}),
  },
  test1: String,
  //接受v-model:test1的修饰符
  test1Modifiers: {
    default: () => ({}),
  }
});

const vModelInput = (e) => {
  let value = e.target.value
  console.log(props.modelModifiers);
  //{a:true}
  if(props.modelModifiers.a){
      //处理value值
  }
  emit("update:modelValue", value);
};

const vModelTest1 = (e) => {
  let value = e.target.value
  console.log(props.test1Modifiers);
  //{b:true,c:true}
  if(props.modelModifiers.b){
      //处理value值
  }
  if(props.modelModifiers.c){
      //处理value值
  }
  emit("update:test1", value);
};
</script>

进阶

问题背景

基础篇中已经讲解了如何封装一个自定义v-model的组件，可是在实际开发中，子组件中使用@input和:value来绑定我们的值，会比较麻烦，有没有更简单的办法呢？

我们通常想要对需要双向绑定的子组件，直接进行v-model绑定：

<!-- 子组件 -->
<input type="text" v-model="xxx" />

问题来了，在子组件中接受到父组件的传值时，xxx我们应该绑定谁？直接绑定props.modelValue么？

<!-- 子组件 -->
<input type="text" v-model="props.modelValue"/>

我们会得到一个错误：

⚠️reactivity.esm-bundler.js:512 Set operation on key "modelValue" failed: target is readonly.

因为props是一个readonly的值(isReadonly(props) === true)，所以我们不能直接这么使用

所以，我们是需要一个中间值来绑定v-model

方式一：通过watch中转

借助内部变量绑定v-model，使用watch监听它，并同步数据props.xxx

<!-- 子组件 -->
<template>
  <input type="text" v-model="proxy" />
</template>

<script setup>
import { ref, watch } from "vue";
const emit = defineEmits();
const props = defineProps({
  modelValue: String,
});

const proxy = ref(props.modelValue);

watch(
  () => proxy.value,
  (v) => emit("update:modelValue",v)
);
</script>

因为有时候我们双向绑定的可能是一个对象或者数组，因此我们可以使用watch里的deep选项来深度监听并同步proxy;

watch(
  () => proxy.value,
  (v) => emit("update:modelValue",v),
  {deep:true}
);

当然，props.modelValue可能存在默认值传入，所以我们也可以加上immediate选项，使得组件在创建时，就直接给proxy赋上默认值；

方式二：computed的get和set

我们也可以借助computed提供的get和set来进行数据同步

const proxy = computed({
  get() {
    return props.modelValue;
  },
  set(v) {
    emit("update:modelValue", v);
  },
});

终极：封装v-model的hooks

我们先来提取watch这种方式，将其封装为一个hooks

<!-- 子组件 -->
<template>
  <input type="text" v-model="proxy" />
</template>

<script setup>
import { ref, watch, computed } from "vue";
const emit = defineEmits();
const props = defineProps({
  modelValue: String,
});

const proxy = ref(props.modelValue);

watch(
  () => proxy.value,
  (v) => emit("update:modelValue", v)
);
</script>

在子组件中，我们用v-model在input上绑定了一个内部值proxy，并以props.modelValue的值初始化proxy变量(ref(props.modelValue))；

在watch中，我们监听input上的绑定值proxy，在input进行输入其值变化时，向外分发emit('update:modelValue',v)事件，将改变的值动态传到外部组件上

提取公用逻辑

// useVmodel1.js
import { ref, watch } from "vue";
export function useVmodel(props, emit) {
  const proxy = ref(props.modelValue);
  watch(
    () => proxy.value,
    (v) => emit("update:modelValue", v)
  );
  return proxy;
}

一个最简单的hooks便被封装好了；

<template>
  <input type="text" v-model="proxy" />
</template>

<script setup>
import { ref, watch, computed } from "vue";
import { useVmodel } from "./hooks/useVmodel1";
const emit = defineEmits();
const props = defineProps({
  modelValue: String,
});
const proxy = useVmodel(props, emit);
</script>

继续抽离封装

考虑到以下几个点，继续进行抽离封装：

emit可以不传，更简洁的调用方式
多个v-model:test1这种情况的事件，emit("update:xxxx")中的xxxx事件名需要提取

我们可以通过vue3提供的getCurrentInstance方法，获取当前的组件实例，而modelValue可覆盖，则抽取成变量:

//useVmodel2.js
import { ref, watch, getCurrentInstance } from "vue";
export function useVmodel(props, key = "modelValue", emit) {
  const vm = getCurrentInstance();
  const _emit = emit || vm?.emit;
  const event = `update:${key}`;
  const proxy = ref(props[key]);
  watch(
    () => proxy.value,
    (v) => _emit(event, v)
  );
  return proxy;
}

好了，现在我们可以更简单的调用我们的hooks了：

<!-- 子组件 childModel -->
<template>
  <input type="text" v-model="modelValue" />
  <input type="text" v-model="test" />
</template>

<script setup>
import { useVmodel } from "./hooks/useVmodel2";
const emit = defineEmits();
const props = defineProps({
  modelValue: String,
  test: String,
});
const modelValue = useVmodel(props);
const test = useVmodel(props, "test");
</script>

<!-- 父组件 -->
<template>
  <Model v-model="modelValue" v-model:test="test" />
</template> 

<script setup>
import { ref, watch } from "vue";
import Model from "./childModel.vue";

const modelValue = ref("");
const test = ref("");
</script>

加载全部内容