Question

如何在同一类型的两个组件之间切换时执行功能？

问题：我有几个需要显示不同数据的地图和图表组件。从地图切换到图表组件时，mounted/nextTick函数按预期运行。当从一个地图切换到另一个地图时，mounted/nextTick函数不会运行，导致vue的模型反映当前地图的变化，但DOM仍显示前一个元素。

另一个例子：更一般地说，假设我有组件A和B.用户创建A1，A2和B1。当用户在A和B类型的任何组件（（A1 || A2）＆amp;＆amp; B1）之间切换时，mounted/nextTick函数按预期运行。当用户显示组件A1并切换到A2时，DOM继续显示A1的数据。

问题：如何让DOM反映从一个组件到同一类型的另一个组件的更改？

示例：

<side-bar></side-bar> <!-- List of elements to choose from (ex: map1, map2, graph1)-->
<template> <!-- The element to be shown with different data depending on which element was clicked -->
    <map v-if="active[0].type == 'map'" :data="changes"></map>
    <graph v-if="active[0].type == 'graph'" :data="changes"></graph>
</template>

Answer 1

如果你使用vue-router，那么你可以使用afterEach函数：

router.afterEach( ( to, from ) => {
  setTimeout( () => {
    document.body.scrollTop = 0;

  }, 100 );
} );

您可在此处找到完整示例：https://github.com/tstabla/Vue.js-starter

Answer 2

@Manan Vaghasiya给出了正确的解决方案。 Vue.js有一个关键的支柱，可以添加它来告诉Vue虚拟DOM算法将每个元素视为一个单独的项目。在代码中，这看起来像这样：

<template v-for="item in items">
    <custom-element :key="something.unique" />
</template>

这将允许交换相同自定义组件的多个实例，而不会将其视为允许mounted/nextTick()函数每次运行的同一对象。

VueJs挂载的nextTick函数未被调用

2 个答案: