Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)

更新時間：2024年06月18日 09:35:32 作者：心潮的滴滴

這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

歷史小劇場

歷史告訴我們，痞子就算混一輩子，也還是痞子，滑頭，最后只能滑自己。長得帥，不能當(dāng)飯吃。
成大器者的唯一要訣，是能吃虧。
吃虧就是占便宜，原先我不信，后來我信了，相當(dāng)靠譜。----《明朝那些事兒》

概述

v-mode實現(xiàn)父子組件數(shù)據(jù)同步原理主要分為：

父組件添加modelValue綁定數(shù)據(jù)且傳遞到子組件，然后綁定@update:modelValue事件接收子組件傳過來的值
子組件內(nèi)部使用defineProps來接收父組件modelValue傳過來的值，使用defineEmits自定義事件修改值然后觸發(fā)父組件@update綁定的事件

同步單個數(shù)據(jù)

父組件

<!--  -->
<template>
    <div>
        <!-- v-model用在HTML上 -->
        <!-- <input type="text" v-model="username"> -->
        <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target)!.value" /> -->
        <h4>賬號: {{ username }}</h4>
        <h4>密碼: {{ pwd }}</h4>
        <!-- v-model用在自定義組件上 -->
        <!-- <XinchaoInput v-model:username="username" v-model:pwd="pwd" /> -->
        <XinchaoInput 
        :username="username"
        @update:username="username = $event" />
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import XinchaoInput from './XinchaoInput.vue';
const username = ref<string>("張三")
const pwd = ref<string>("123131")
watch(username, (oldValue, newValue) => {
    console.log(newValue)
})
</script>
<style lang="scss" scoped>
</style>

子組件

<!--  -->
<template>
    <div>
        <input type="text"
        :value="username"
        @input="emit('update:username', (<HTMLInputElement>$event.target)!.value)" />
        <!-- <br>
        <input type="text"
        :value="pwd"
        @input="emit('update:pwd', (<HTMLInputElement>$event.target)!.value)" /> -->
    </div>
</template>
<script setup lang="ts">
defineProps(['username', 'pwd'])
const emit = defineEmits(['update:username', 'update:pwd'])
</script>
<style lang="scss" scoped>
input {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 2px;
    background-color: darkcyan;
    color: white;
}
</style>

同步多個數(shù)據(jù)

父組件

<!--  -->
<template>
    <div>
        <!-- v-model用在HTML上 -->
        <!-- <input type="text" v-model="username"> -->
        <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target)!.value" /> -->
        <h4>賬號: {{ username }}</h4>
        <h4>密碼: {{ pwd }}</h4>
        <!-- v-model用在自定義組件上 -->
        <XinchaoInput v-model:username="username" v-model:pwd="pwd" />
        <!-- <XinchaoInput 
        :username="username"
        @update:username="username = $event" /> -->
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import XinchaoInput from './XinchaoInput.vue';
const username = ref<string>("張三")
const pwd = ref<string>("123131")
watch(username, (oldValue, newValue) => {
    console.log(newValue)
})
</script>
<style lang="scss" scoped>
</style>

子組件

<!--  -->
<template>
    <div>
        <input type="text"
        :value="username"
        @input="emit('update:username', (<HTMLInputElement>$event.target)!.value)" />
        <br>
        <input type="text"
        :value="pwd"
        @input="emit('update:pwd', (<HTMLInputElement>$event.target)!.value)" />
    </div>
</template>
<script setup lang="ts">
defineProps(['username', 'pwd'])
const emit = defineEmits(['update:username', 'update:pwd'])
</script>
<style lang="scss" scoped>
input {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 2px;
    background-color: darkcyan;
    color: white;
}
</style>

到此這篇關(guān)于Vue3 使用v-model實現(xiàn)父子組件通信（常用在組件封裝規(guī)范中）的文章就介紹到這了,更多相關(guān)Vue3 v-model父子組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: