背景

再很多場景中，我們可能想在子組件中修改父組件的數(shù)據(jù)，但事實(shí)上，vue不推薦我們這么做，因?yàn)閿?shù)據(jù)的修改不容易溯源。

Vue2寫法

在vue2中，我們使用.sync修飾符+自定義事件'update:xxx'，來使父子組件數(shù)據(jù)同步。

// 父組件
<template>
    <div>
        <h2>我是父組件，我有{{ money }}￥</h2>
        <hr>
				<!-- 這里使用.sync修飾符，使**子組件pmoney**與**父組件money**同步 -->
        <Son :pmoney.sync="money" />
    </div>
</template>

<script>
import Son from "./son.vue";
export default {
    components: {
        Son,
    },
    data() {
        return {
            money: 1000 // 父組件數(shù)據(jù)
        };
    },
};
</script>

// 子組件
<template>
    <div>
        <h2>我是子組件，我爹有{{ pmoney }}￥</h2>
				<!-- 觸發(fā)**update:pmoney**這個(gè)自定義事件，事件參數(shù)就是要更改的值 -->
        <button @click="$emit('update:pmoney', pmoney - 100)">用了100￥</button>
    </div>
</template>

<script>
export default {
    props: {
				// 定義父組件傳進(jìn)來的數(shù)據(jù)
        pmoney: {
            type: Number,
            default: 0
        },
    },
};
</script>

這里不作過多說明，有需要請自行了解。

Vue3寫法

vue3的寫法與vue2基本一致。最大的區(qū)別就是，使用v-model代替.sync修飾符。

// 父組件
<template>
    <div>
        <!-- 父組件的數(shù)據(jù) -->
        <h2>我是父組件，我有{{ money }}￥</h2>
        <hr>
        <!-- 使用子組件 -->
        <!-- 這里v-model的作用相當(dāng)于vue2的.sync修飾符 -->
        <Son v-model:pmoney="money" />
        <!-- 也可以綁定多組數(shù)據(jù) -->
        <!-- <Son v-model:pmoney1="money" v-model:pmoney2="money" /> -->
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 引入子組件
import Son from './son.vue';

// 父組件的數(shù)據(jù)
const money = ref(1000);
</script>

// 子組件
<template>
    <div>
        <!-- 使用props中的數(shù)據(jù) -->
        <h3>我是子組件，我爹有{{ pmoney }}￥</h3>
        <!-- 這里通過自定義事件，向父組件傳遞變更后的值，由父組件監(jiān)聽事件并修改數(shù)據(jù) -->
        <button @click="emit('update:pmoney', pmoney - 100)">我使用了100￥</button>
    </div>
</template>

<script setup lang="ts">
// 定義props，接收父組件的數(shù)據(jù)
defineProps(['pmoney']);

// 定義emits，用于觸發(fā)父組件的事件
const emit = defineEmits(['update:pmoney']);
</script>

原理剖析

下面的v-model:pmoney實(shí)際是v-bind:pmoney 屬性綁定和@update:pmoney 事件綁定的語法糖。

這里事件綁定的@update:是固定的，這就是子組件的自定義事件要加update: 前綴的原因。

<Son v-model:pmoney="money" />

相當(dāng)于

<Son :pmoney="money" @update:pmoney="money = $event" />

• $event：子組件通過自定義事件傳給父組件的值。

父子組件數(shù)據(jù)同步的本質(zhì)

本質(zhì)是子組件通過自定義事件向父組件傳參數(shù)，子組件觸發(fā)自定義事件并傳值，父組件監(jiān)聽自定義事件并取值，同時(shí)修改原本的數(shù)據(jù)，因?yàn)関-bind數(shù)據(jù)綁定，子組件數(shù)據(jù)也會(huì)更新到最新的值。文章來源地址http://www.zghlxwxcb.cn/news/detail-675076.html

到了這里，關(guān)于vue3探索——組件通信之v-model父子組件數(shù)據(jù)同步的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！