Vue 3 从父组件更新子组件的数据

Question

我正在将一个应用程序从 KnockoutJS 迁移到 VueJS。我在将模板转换为组件时遇到困难。它类似于选项卡结构，其中只有 1 个项目可以处于活动状态，这是使用我已更改为 ref 的名为 isActive 的可观察对象控制的。当用户单击某个项目时，我想遍历父级列表中的子组件，并将 isActive 值设置为 false，然后再将单击项目上的 isActive 设置为 true。

我已经能够更新被点击项目的 isActive 值，但我看不到父项目的 isActive ref 值。如何从父组件获取子组件及其数据？

我这里有一个代码示例。 DEMO

Answer 1

如果您在我们的 changeSelectionWizardView 函数中调出 menuItem.isActive.value，您将找到您的 isActive 反应值。

但是正如我从您的代码中看到的那样，您将 plain/unreactive 对象作为 props 传递给 SelectionMenuItem 组件。因此，当您更新父组件中的 isActive 值时，子组件将不会得到更改。

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

我对您的代码做了一些更改，现在我认为它的工作方式与您在问题中提到的一样 above.Here 是 link

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

Vue 3 从父组件更新子组件的数据

Updating data on child components from a parent component in Vue 3

javascript

knockout.js

vue.js

vuejs3