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