vue3中使用v-model实现父子组件数据同步的三种方案
作者：鋜斗
这篇文章主要介绍了vue3中使用v-model实现父子组件数据同步的三种方案,如果只有一个匿名v-model的传递的话,可以使用vue3.3新添加的编译宏,defineModel来使用,每种方案结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
前言
方法一
绑定单个v-model,并且使用modelValue接收，是匿名的，也可以命名，看第二种方法
父组件
<template>
<div>
<MyInput ref="myinput" v-model="valueKey"></MyInput>
{{valueKey}}
<button @click="click1">nn</button>
</div>
</template>
<script setup lang="ts">
import MyInput from "@/model/Myinput.vue";
import { ref } from "vue";
let myinput = ref(null)
let valueKey = ref("传递");
let click1 = ()=>{
myinput.value.params();
}
</script>
<style lang="less" scoped>
</style>子组件
<template>
<div>
<input type="text" v-model="val" @input="Editval">
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
let val = ref(props.modelValue)
let timer = null;
const Editval = (e:Event)=>{
emit('update:modelValue',(e.target as HTMLInputElement).value)
}
</script>
<style lang="less" scoped>
</style>总结:父组件正常传递，子组件通过modelValue来接受，然后使用emit(“update:modelValue”,参数)来修改
方法二
绑定多个v-model
父组件
<template>
<div>
<MyInput v-model:valueKey="valueKey" v-model:valueIndex="valueIndex"></MyInput>
key:{{valueKey}}
<br>
index:{{valueIndex}}
<br>
</div>
</template>
<script setup lang="ts">
import MyInput from "@/model/Myinput.vue";
import { ref } from "vue";
let valueKey = ref("传递");
let valueIndex = ref("aaaa");
</script>
<style lang="less" scoped>
</style>子组件
<template>
<div>
<input type="text" v-model="val" @input="Editval" />
<input type="text" v-model="ind" @input="Editind" />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const props = defineProps(["valueKey", "valueIndex"]);
const emit = defineEmits(["update:valueKey", "update:valueIndex"]);
let val = ref(props.valueKey);
let ind = ref(props.valueIndex);
let timer = null;
const Editval = (e: Event) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
emit("update:valueKey", (e.target as HTMLInputElement).value);
}, 500);
};
const Editind = (e: Event) => {
emit("update:valueIndex", (e.target as HTMLInputElement).value);
};
</script>
<style lang="less" scoped></style>总结：多个v-model可以使用: 来进行一个命名，然后子组件接收
子组件的修改valueKey的值我是采用了一个防抖函数
方法三
如果只有一个匿名v-model的传递的话，可以使用vue3.3新添加的编译宏，defineModel来使用
注意：因为defineModel的实现属性在vue3默认中是关闭的需要配置在vite.config.ts文件中配置，vue()里面配置为defineModel配置为true
export default defineConfig({
plugins: [vue({
script:{
defineModel:true
}
})],
})
父组件
<template>
<div>
<MyInput v-model="valueKey"></MyInput>
key:{{valueKey}}
</div>
</template>
<script setup lang="ts">
import MyInput from "@/model/Myinput.vue";
import { ref } from "vue";
let valueKey = ref("传递");
</script>
<style lang="less" scoped>
</style>子组件
<template>
<div>
<input type="text" v-model="val"/>
</div>
</template>
<script setup lang="ts">
let val = defineModel()
</script>
<style lang="less" scoped></style>到此这篇关于vue3中使用v-model实现父子组件数据同步的文章就介绍到这了,更多相关vue3父子组件数据同步内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！