我正在将一个应用程序从KnockoutJS迁移到VueJS。我在将模板转换为组件时遇到了困难。这类似于一个标签结构,其中只有一个项目可以是活动的,这是使用一个名为isActive的可观察对象来控制的,我已经将其更改为引用。当用户单击某个项目时,我希望循环遍历父组件列表中的子组件,并在设置isActive之前将isActive值设置为false设置为true。
我已经可以更新单击项的isActive值,但在父项上看不到isActive引用值。如何从父项中获取子组件及其数据?
下面是一个代码示例。DEMO
2条答案
按热度按时间bkkx9g8r1#
您可以使用
ref
来访问父组件中的子组件:类似地,在子组件中,可以使用
$parent
访问父组件。但这并不是特别推荐的,因为它将子组件耦合到父组件(这意味着,没有它,它实际上不会正常工作,目标通常是创建可以在任何地方重用的不可知组件),通常使用道具和发射事件会有更好的解决方案。643ylb082#
如果您在
changeSelectionWizardView
函数中控制menuItem.isActive.value
,您将找到isActive无功值。但是我可以从你的代码中看到,你传递了一个普通的/无React的对象作为一个道具给你的
SelectionMenuItem
组件,所以当你更新父组件中的isActive值时,子组件不会得到改变。一个可能的解决方案是,使menuItems成为React性数据。然后将React性menuItem作为props传递给子组件。在每次
change
发出事件调用后,只需更新menuItems isActive值,然后props将React性地将最新更新的数据传递给子组件。我已经在你的代码中做了一些修改,现在我认为它的工作就像你在上面的问题中提到的那样。
最后,一个小建议,尝试使用选项API或组合API,不要同时使用这两种API,这会使您的代码调试更加困难。