vue3中使用v-model实现父子组件数据同步的三种方案

<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>

<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>

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>