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>

后言

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

相关推荐
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
浏览器API调用工程师_Taylor2 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
一个水瓶座程序猿.2 小时前
Vue3 中使用 Vueuse
前端·javascript·vue.js
网络点点滴2 小时前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
paopaokaka_luck3 小时前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
雲墨款哥4 小时前
Vue3.0 项目初始化及 Element Plus 配置实战
前端·vue.js
前端小饭桌4 小时前
关于 Vue 3 的 ref,这些细节你了解了多少?
前端·vue.js
光影少年4 小时前
vue3.0性能提升主要通过那几方面体现的?
前端·vue.js
江城开朗的豌豆4 小时前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen02114 小时前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js