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

文章目录

问题描述

  • 第二个child会受到第一个child的影响而线上666的值
html 复制代码
<template>
	<child :value="666" />
	<child />
</template>
<script>
import child from './child';
export default {
  components: {
    child,
  },
  data() {
    return {};
  },
  computed: {},
  methods: {},
  watch: {},
  mounted() {},
};
</script>

解决方法

  • 第二个child2就不会显示child1666的值了
html 复制代码
<template>
	<child1 :value="666" />
	<child2 />
</template>
<script>
export default {
  components: {
    child1: () => import('./child'),
    child2: () => import('./child'),
  },
  data() {
    return {};
  },
  computed: {},
  methods: {},
  watch: {},
  mounted() {},
};
</script>
相关推荐
你的人类朋友19 小时前
什么是断言?
前端·后端·安全
FIN666820 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎49520 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。12420 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树20 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN666820 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER20 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰20 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木20 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
山海鲸可视化20 小时前
简单聊聊数据可视化大屏制作的前端设计与后端开发
前端·信息可视化·数字孪生·数据可视化·3d模型·三维渲染