vue3的setup语法如何自定义v-model为公用hooks
前言
- 基础篇：简单介绍
vue3的setup语法如何自定义v-model； - 进阶篇：如何提取
v-model语法作为一个公用hooks；
基础
基础篇可绕过，只是对于官网给出的教程，进行了总结概括并给出demo
基本的v-model
子组件中满足两个点，即可完成自定义双向绑定：
props中定义一个值xxxemit中定义一个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和test2emits中定义两个事件，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中定义两个值modelValuemodelModifiers，接受修饰符key值
- 对于自定义
v-model:xxx来说，props中：xxxxxxModeifiers，接受修饰符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>到此这篇关于vue3的setup语法如何自定义v-model为公用hooks的文章就介绍到这了,更多相关vue自定义v-model内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
