【Vue】同一个页面多次复用同一个组件数据相互干扰问题

问题描述

• 第二个child会受到第一个child的影响而线上666的值

<template><child :value="666" /><child />
</template>
<script>
import child from './child';
export default {components: {child,},data() {return {};},computed: {},methods: {},watch: {},mounted() {},
};
</script>

解决方法

• 第二个child2就不会显示child1中666的值了

<template><child1 :value="666" /><child2 />
</template>
<script>
export default {components: {child1: () => import('./child'),child2: () => import('./child'),},data() {return {};},computed: {},methods: {},watch: {},mounted() {},
};
</script>