将组件附加到多个键

Posted 2023-02-23

【中文标题】将组件附加到多个键

【英文标题】：Attach component to multiple keys

【发布时间】：2020-01-01 12:52:18

【问题描述】：

我有一个组件，它有两个需要重新绘制/重建的属性，因为该组件不是响应式的（它是一个包装的 jQuery 组件）。

<component :template="template" :submit="submit" :data="data"></component>

我发现:key 是正确的使用方式（How can I reload a vue component?、https://michaelnthiessen.com/force-re-render/）。

但由于我有两个属性要看，我不知道该怎么做。

两个键导致错误duplicate attribute: :key

<component :key="data" :key="selected_form" :template="template" :submit="submit" :data="data"></component>

将它们放在一个数组中会导致警告Avoid using non-primitive value as key, use string/number value instead.

<component :key="[data, selected_form]" :template="template" :submit="submit" :data="data"></component>

如果任一模型发生更改，重新绘制组件的正确/最佳方法是什么？

【参考方案1】：

您可以使用返回一些基于data 和selected_form 的字符串的方法..

<component :key="getKey(data, selected_form)" :template="template" :submit="submit" :data="data"></component>

在你的方法中..

methods: 
  getKey(data, selected_form) 
    // return some string based on data and selected_form
  

【讨论】：

可行，但我无法想象这是一个优雅的解决方案。

@white_gecko 同意，但我想不出其他方法。

由于没有其他答案，这可能是目前最好的。我也实现了它并且它有效。但我仍在留意更好的回复；-)

【参考方案2】：

我们可以使用两个键：

<component :key="data && selected_form"></component>