从VUE 3中的父组件更新子组件的数据

Question

我正在将应用程序从淘汰赛迁移到vuejs。我很难将模板转换为组件。它类似于一个选项卡结构，其中只能使用一个可观察的称为iSACTIVE的可观察到的iSActive来控制的选项卡结构，我将我更改为ref。当用户单击一个项目时，我想循环通过父列表中的列表中的子组件，并将iSARTIVE值设置为false，然后将单击项目的iSActive设置为true。

我已经能够更新点击项目的ISACTIVE值，但是我看不到父母的iSActive Ref值。我如何从父母那里获取孩子组件及其数据？

我有一个示例，说明这里的代码是什么样子。 demo

Answer 1

您可以使用 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 访问父组件。但这并不是特别推荐的，因为它将子组件耦合到父组件（这意味着，如果没有它，它就无法真正正常工作，目标通常应该是创建可以在任何地方重用的不可知组件），并且通常会出现使用 props 和发射事件可能是一个更好的解决方案。

Answer 2

如果您在 changeSelectionWizardView 函数中控制台 menuItem.isActive.value，您将找到 isActive 反应值。

但正如我从您的代码中看到的，您将一个普通/非反应对象作为道具传递给您的 SelectionMenuItem 组件。因此，当您更新父组件中的 isActive 值时，子组件将不会收到更改。

一种可能的解决方案是，使 menuItems 成为反应数据。然后将响应式 menuItem 作为 props 传递给子组件。在每次 change 发出事件调用后，您只需更新 menuItems isActive 值，然后 props 就会将最新更新的数据反应性地传递给子组件。

我对您的代码进行了一些更改，现在我认为它的工作原理就像您在上面的问题中提到的那样。这是 link

最后，一个小建议，尝试使用选项 API 或组合 API，不要同时使用它们同时，它使你的代码调试更加困难。