vue3中使用v-model实现父子组件数据同步的三种方案
更新时间：2023年10月28日 11:59:53 作者：鋜斗
这篇文章主要介绍了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父子组件数据同步内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解vue3中组件的非兼容变更，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了vue如何获取当前url地址加端口号问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要介绍了vue在线动态切换主题色方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了关于Vue实现组件信息的缓存问题的相关资料,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了在vue中使用echarts实现上浮与下钻效果,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要给大家介绍了如何利用vue.js实现拖放功能的相关资料，本文并未使用现有的库，而是使用内置的HTML拖放API来实现简单的拖放系统，需要的朋友可以参考下2021-06-06
Vue3中当v-if和v-for同时使用时产生的问题和解决办法
封装一个组件时,我使用到了v-for和v-if,它们在同一标签内,总是提示v-for循环出来的item在实例中没有被定义,查询资料后原因是因为v-for和v-if在同级使用时,v-if优先级比v-for高,所以本文给大家介绍了Vue3中当v-if和v-for同时使用时产生的问题和解决办法2024-07-07
VUE中路由变化this.$router(push\replace\go\back)解读
这篇文章主要介绍了VUE中路由变化this.$router(push\replace\go\back),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了vue使用iframe嵌入网页的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
vue关于this.$refs.tabs.refreshs()刷新组件方式
这篇文章主要介绍了vue关于this.$refs.tabs.refreshs()刷新组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论