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 小时前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
试图让你心动11 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏12 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴85013 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
JSON_L17 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊17 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选17 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
Britney⁺♛&?ꪶꪫꪜꫀ20 小时前
Vue2上
vue.js·npm