如何在递归组件中“避免直接改变 prop”

Question

我理解这个概念：子级在其自己的道具数据副本上工作，当它发生更改时，它可以$emit进行更改，以便父级可以更新自身。

然而，我正在处理递归树结构，例如文件系统，是一个很好的类比。

[
 { type: 'dir', name: 'music', children: [
    { type: 'dir', name: 'genres', children: [
       { type: 'dir', name: 'triphop', children: [
          { type: 'file', name: 'Portishead' },
          ...
       ]},
     ]}
   ]}
]}

我有一个名为的递归组件Thing，它需要一个childtree prop，看起来有点像这样：

[
 { type: 'dir', name: 'music', children: [
    { type: 'dir', name: 'genres', children: [
       { type: 'dir', name: 'triphop', children: [
          { type: 'file', name: 'Portishead' },
          ...
       ]},
     ]}
   ]}
]}

修改名称显然会直接修改 prop，这是要避免的，Vue 会发出警告。

然而，我认为避免这种情况的唯一方法是对每个组件进行深度复制childtree；然后$emit我们的副本的副本，并有一个@input（或这样的）副本将其恢复为原件；一直到树上，然后会改变道具一直到树下，导致所有内容的另一个深层副本！

感觉对于任何大小的树来说，它的效率都非常低。

有没有更好的办法？我知道你可以欺骗 Vue 不发出错误/警告示例 jsfiddle。

Answer 1

解决您的问题的方法是仅传递子组件中的事件。 https://jsfiddle.net/kv1w72pg/2/

<input @input="(e) => $emit('input', e.target.value)" />

话虽如此，我强烈建议您使用其他解决方案，例如：

1. 维埃克斯,
2. 活动巴士

它将使代码变得清晰并确保真相的唯一来源。

编辑：在递归继承的情况下，使用提供注入会更容易： https: //jsfiddle.net/s0b9fpr8/4/

通过这种方式，您可以提供一个可以将基本组件的状态更改为所有子组件的函数（必须注入函数）。