vue3中使用v-model实现父子组件数据同步

文章目录

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:Vue.js

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

方法一

绑定单个v-model,并且使用modelValue接收,是匿名的,也可以命名,看第二种方法

父组件

javascript 复制代码
<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>

子组件

javascript 复制代码
<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

父组件

javascript 复制代码
<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>

子组件

javascript 复制代码
<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

javascript 复制代码
export default defineConfig({
	plugins: [vue({
    script:{
      defineModel:true
    }
  })],
})

父组件

javascript 复制代码
<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>

子组件

javascript 复制代码
<template>
  <div>
    <input type="text" v-model="val"/>
  </div>
</template>

<script setup lang="ts">
let val = defineModel()


</script>

<style lang="less" scoped></style>

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

相关推荐
OpenTiny社区9 分钟前
如何使用 TinyEditor 快速部署一个协同编辑器?
前端·vue.js
胖虎26510 分钟前
打造梦幻粒子动画效果:基于 Vue 的 Canvas 实现方案
vue.js
李剑一1 小时前
vite框架下大屏适配方案
前端·vue.js·响应式设计
胖虎2651 小时前
从零搭建 Vue3 富文本编辑器:基于 Quill可扩展方案
vue.js
濑户川2 小时前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js
前端九哥2 小时前
我删光了项目里的 try-catch,老板:6
前端·vue.js
顽疲3 小时前
SpringBoot + Vue 集成阿里云OSS直传最佳实践
vue.js·spring boot·阿里云
一 乐3 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理
百锦再3 小时前
Python、Java与Go:AI大模型时代的语言抉择
java·前端·vue.js·人工智能·python·go·1024程序员节
菩提树下的凡夫4 小时前
前端vue的开发流程
前端·javascript·vue.js