Vue 3 從父組件更新子組件的數據

Question

我正在將應用程序從 KnockoutJS 遷移到 VueJS。 我在將模板轉換為組件時遇到困難。 它類似於選項卡結構，其中只有 1 個項目可以處於活動狀態，這是使用我已更改為 ref 的名為 isActive 的可觀察對象控制的。 當用戶單擊某個項目時，我想遍歷父級列表中的子組件，並在將單擊的項目上的 isActive 設置為 true 之前將 isActive 值設置為 false。

我已經能夠更新被點擊項目的 isActive 值，但我看不到父項目的 isActive ref 值。 如何從父組件獲取子組件及其數據？

我有一個代碼在這里的例子。 演示

Answer 1

如果您在我們的changeSelectionWizardView function 中控制台輸出menuItem.isActive.value ，您會發現您的 isActive 反應值。

但正如我從您的代碼中看到的那樣，您將一個普通/無反應的 object 作為道具傳遞給您的SelectionMenuItem組件。 因此，當您更新父組件中的 isActive 值時，子組件不會得到更改。

一種可能的解決方案是，使 menuItems 成為反應性數據。 然后將響應式 menuItem 作為道具傳遞給子組件。 在每次change發出事件調用后，您只需更新 menuItems 的 isActive 值，然后道具將反應性地將最新更新的數據傳遞給子組件。

我對您的代碼進行了一些更改，現在我認為它的工作方式與您在上面的問題中提到的一樣。這是鏈接

最后，一個小建議，嘗試使用選項 API 或組合 API，不要同時使用它們，這會使您的代碼調試更加困難。

Answer 2

您可以使用ref訪問父組件中的子組件：

<template>
    <div>
        <child-component ref="mychild" />
    </div>
</template>

<script>
export default {
    mounted() {
        // this.$refs.mychild will be the instance of the child component.
        // You can access all of its data and methods
    }
}
</script>

同樣，在子組件中，您可以使用$parent訪問父組件。 這不是特別推薦，因為它將子組件耦合到父組件（意思是，沒有它它不會真正正常工作，目標通常應該是創建可以在任何地方重用的不可知組件），並且通常會有使用道具和發射事件可能是一個更好的解決方案。