vue2中v-if里面相同组件不重新渲染

<template>
	<div class="app-container">
		<template v-if="type === '1'">
			<CommonForm :formData="{a:1}" ref="contract_gov" />
		</template>

		<template v-if="type === '2'">
			<CommonForm :formData="{b:2}" ref="contract_coal" />
		</template>
	</div>
</template>

如代码，v-if 里面 type切换时 CommonForm 组件不重新渲染，即 CommonForm 里面的 created都不会重新执行

问题原因:

内容太相似，vue没有识别出来

解决方法：

在 CommonForm 上添加不同的 key 即可，如：

<template>
	<div class="app-container">
		<template v-if="type === '1'">
			<CommonForm key="1" :formData="{a:1}" ref="contract_gov" />
		</template>

		<template v-if="type === '2'">
			<CommonForm key="2" :formData="{b:2}" ref="contract_coal" />
		</template>
	</div>
</template>

别来杠为什么不直接用一个 CommonForm，切换数据即可（哈哈哈）