SoFunction
Updated on 2025-04-12

Three solutions to implement data synchronization of parent-child components using v-model in vue3

Preface

Method 1

Bind a single v-model and receive it using modelValue. It is anonymous and can also be named. See the second method

Parent component

<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/";
import { ref } from "vue";
let myinput = ref(null)
let valueKey = ref("transfer");
let click1 = ()=>{
  ();
}
</script>
<style lang="less" scoped>
</style>

Subcomponents

<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()
let timer = null;
const Editval = (e:Event)=>{
    emit('update:modelValue',( as HTMLInputElement).value)
}
</script>
<style lang="less" scoped>
</style>

Summarize: The parent component is passed normally, the child component is accepted through modelValue, and then uses emit ("update:modelValue", parameter) to modify

Method 2

Bind multiple v-models

Parent component

&lt;template&gt;
    &lt;div&gt;
        &lt;MyInput v-model:valueKey="valueKey" v-model:valueIndex="valueIndex"&gt;&lt;/MyInput&gt;
        key:{{valueKey}}
        &lt;br&gt;
        index:{{valueIndex}}
        &lt;br&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;script setup lang="ts"&gt;
import MyInput from "@/model/";
import { ref } from "vue";
let valueKey = ref("transfer");
let valueIndex = ref("aaaa");
&lt;/script&gt;
&lt;style lang="less" scoped&gt;
&lt;/style&gt;

Subcomponents

<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();
let ind = ref();
let timer = null;
const Editval = (e: Event) => {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    emit("update:valueKey", ( as HTMLInputElement).value);
  }, 500);
};
const Editind = (e: Event) => {
  emit("update:valueIndex", ( as HTMLInputElement).value);
};
</script>
<style lang="less" scoped></style>

Summarize: Multiple v-models can be used to make a name using: and then the child component receives it.
I used an anti-shake function to modify the value of the valueKey in the subcomponent

Method 3

If there is only one anonymous v-model pass, you can use the newly added compiled macro in vue3.3 and defineModel to use it

Note: Because the implementation property of defineModel is closed in vue3 by default, it needs to be configured in the file, vue() is configured as defineModel is configured as true

export default defineConfig({
	plugins: [vue({
    script:{
      defineModel:true
    }
  })],
})

Parent component

&lt;template&gt;
    &lt;div&gt;
        &lt;MyInput v-model="valueKey"&gt;&lt;/MyInput&gt;
        key:{{valueKey}}
    &lt;/div&gt;
&lt;/template&gt;
&lt;script setup lang="ts"&gt;
import MyInput from "@/model/";
import { ref } from "vue";
let valueKey = ref("transfer");
&lt;/script&gt;
&lt;style lang="less" scoped&gt;
&lt;/style&gt;

Subcomponents

<template>
  <div>
    <input type="text" v-model="val"/>
  </div>
</template>
<script setup lang="ts">
let val = defineModel()
</script>
<style lang="less" scoped></style>

This is the article about using v-model to implement parent-child component data synchronization in vue3. For more related content on data synchronization of parent-child component of vue3, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!