knockout.js 从Vue 3中的父组件更新子组件上的数据

wz1wpwve  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(231)

我正在将一个应用程序从KnockoutJS迁移到VueJS。我在将模板转换为组件时遇到了困难。这类似于一个标签结构,其中只有一个项目可以是活动的,这是使用一个名为isActive的可观察对象来控制的,我已经将其更改为引用。当用户单击某个项目时,我希望循环遍历父组件列表中的子组件,并在设置isActive之前将isActive值设置为false设置为true。
我已经可以更新单击项的isActive值,但在父项上看不到isActive引用值。如何从父项中获取子组件及其数据?
下面是一个代码示例。DEMO

bkkx9g8r

bkkx9g8r1#

您可以使用ref来访问父组件中的子组件:

  1. <template>
  2. <div>
  3. <child-component ref="mychild" />
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. mounted() {
  9. // this.$refs.mychild will be the instance of the child component.
  10. // You can access all of its data and methods
  11. }
  12. }
  13. </script>

类似地,在子组件中,可以使用$parent访问父组件。但这并不是特别推荐的,因为它将子组件耦合到父组件(这意味着,没有它,它实际上不会正常工作,目标通常是创建可以在任何地方重用的不可知组件),通常使用道具和发射事件会有更好的解决方案。

展开查看全部
643ylb08

643ylb082#

如果您在changeSelectionWizardView函数中控制menuItem.isActive.value,您将找到isActive无功值。
但是我可以从你的代码中看到,你传递了一个普通的/无React的对象作为一个道具给你的SelectionMenuItem组件,所以当你更新父组件中的isActive值时,子组件不会得到改变。
一个可能的解决方案是,使menuItems成为React性数据。然后将React性menuItem作为props传递给子组件。在每次change发出事件调用后,只需更新menuItems isActive值,然后props将React性地将最新更新的数据传递给子组件。
我已经在你的代码中做了一些修改,现在我认为它的工作就像你在上面的问题中提到的那样。
最后,一个小建议,尝试使用选项API或组合API,不要同时使用这两种API,这会使您的代码调试更加困难。

相关问题