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>

后言

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

相关推荐
程序定小飞1 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端
BumBle2 小时前
uniapp 用css实现圆形进度条组件
前端·vue.js·uni-app
Komorebi_99992 小时前
Vue3 + TypeScript provide/inject 小白学习笔记
前端·javascript·vue.js
二十雨辰3 小时前
vite性能优化
前端·vue.js
明月与玄武3 小时前
浅谈 富文本编辑器
前端·javascript·vue.js
FuckPatience4 小时前
Vue 与.Net Core WebApi交互时路由初探
前端·javascript·vue.js
aklry5 小时前
elpis之学习总结
前端·vue.js
FuckPatience6 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
Komorebi_99997 小时前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
Hilaku7 小时前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js