有条件地渲染同一个组件不会触发挂载()钩子。

Posted 2023-02-15

我对Vue很陌生，如果我的思路有误，请指正。我正在尝试有条件地渲染这样一个组件。

<div>
  <Map v-if="bool" mapSrc="src1.jpg" :idList="idList1" :data="dataVariable1"></Map>
  <Map v-else mapSrc="src2.jpg" :idList="idList2" :data="dataVariable2"></Map>
</div>

我的目标是根据v -if的状态，用不同的道具渲染同一个组件。所以当bool为真时，它应该渲染第一个组件，而当我把bool切换为假时，它应该渲染第二个选项。道具似乎正确地改变了，但是当我切换bool状态时，似乎没有再次运行mounted()钩子，这说明component1似乎没有下马，它基本上只是切换了道具。

我想要的是，当bool为false时，它应该呈现出整个组件实例的全新版本，并且要隔离之前在组件1中发生的事情。

我怎么才能实现这个功能呢？

答案

根据Linus Borg的答案 此处，你应该添加一个独特的 key 属性来实现。

另一答案

您可以通过使用 key 属性说明不同 key 2个地图组件。

<Map v-if="bool" mapSrc="src1.jpg" :idList="idList1" :data="dataVariable1" key="map1"></Map>
  <Map v-else mapSrc="src2.jpg" :idList="idList2" :data="dataVariable2" key="map2"></Map>