prop 更改时新的 vue 组件实例

Posted 2023-02-23

【中文标题】prop 更改时新的 vue 组件实例

【英文标题】：New vue component instance when prop changes

【发布时间】：2018-05-21 12:20:15

【问题描述】：

我们的单页应用程序具有基于组件的不同视图。由于单向数据流，当父项中绑定的相应值发生更改时，子项中的每个属性都会更新。

如果属性发生变化，是否可以获得一个全新的组件实例？结合过渡，我想实现旧组件滑出，而基于最新属性值的新组件滑入。

我真的很期待一些很酷的输入。

【参考方案1】：

你可以通过更新密钥来做到这一点：

<transition name="fade">
  <hello :key="key"></hello>
</transition>

然后更新密钥：

<button @click="key++">Reload</button>

查看我的小提琴示例：

https://jsfiddle.net/eaguad1337/w9fb1pv2/

【讨论】：

看起来很有希望！我试试看。

我刚刚将这种方法包含在我当前的项目中并且它有效。非常感谢！唯一的小缺点是，我还必须更改这些转换的键。基于参数将是最好的。