前言
hello world欢迎来到前端的新世界
😜当前文章系列专栏：Vue.js
🐱👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力
方法一
绑定单个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>
后言
创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力
