快捷導(dǎo)航

vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案

更新時(shí)間：2023年10月28日 11:59:53 作者：鋜斗

這篇文章主要介紹了vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的三種方案,如果只有一個(gè)匿名v-model的傳遞的話,可以使用vue3.3新添加的編譯宏,defineModel來(lái)使用,每種方案結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

前言

方法一

綁定單個(gè)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>

總結(jié):父組件正常傳遞，子組件通過(guò)modelValue來(lái)接受，然后使用emit(“update:modelValue”,參數(shù))來(lái)修改

方法二

綁定多個(gè)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>

總結(jié)：多個(gè)v-model可以使用: 來(lái)進(jìn)行一個(gè)命名，然后子組件接收
子組件的修改valueKey的值我是采用了一個(gè)防抖函數(shù)

方法三

如果只有一個(gè)匿名v-model的傳遞的話，可以使用vue3.3新添加的編譯宏，defineModel來(lái)使用

注意：因?yàn)閐efineModel的實(shí)現(xiàn)屬性在vue3默認(rèn)中是關(guān)閉的需要配置在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>

到此這篇關(guān)于vue3中使用v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的文章就介紹到這了,更多相關(guān)vue3父子組件數(shù)據(jù)同步內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: