如标题所说，我们在使用vue.js组件时，会出现在同一个页面会多次使用相同的组件，更特别的是，组件相同，但数据呈现上是完全不同的，但dom交互的处理是一样的，在这样的背景下，有可能引起组件数据跟需求不一致，交互无法运行等问题，这两个问题是比较常见的。

由于组件在初始化时，是共用的作用域，因此，变量数据是一致的，另外一个问题是因此，大部份的情况下，交互编写可能都会考虑到dom元素的选取问题，如果组件中出现多个相同的id,那交互上会出问题，也不足为奇了。

为了解决如上的问题，我们编写组件的时候，需要考虑组件作用域的隔离，dom元素的独立性，一般处理方法是，引用时，采用不同的别名引入多个相同的组件作为父页面的实例，另外一个思路，是通过父元素传递不同的dom来实现交互隔离。至于数据不同，那就可以考虑props来处理了。

例如：

比如有现在有一个yanggb组件，我引入到我的页面中（创建了一个组件实例），然后调用两次（在页面上调用组件实例两次），那么当我给第一个调用绑定的对象变量的一个属性赋值了100，那么第二个调用绑定的同一个对象变量的该属性也会被赋值100，因为这两个调用在同一个作用域内绑定了同一个对象变量，而JavaScript内一切对象皆为引用，也就导致第二个调用的值跟着第二个调用的值变化了

// 引用yanggb组件并创建一个实例
const yanggb = () => import('@/components/yanggb')
// 注册该组件实例
components: { yanggb }
// 在页面上两次调用该组件实例
<yanggb :value="100"></yanggb>
<yanggb></yanggb>

这个时候，如果该组件是直接显示的:value属性中绑定的值的话，那么两个调用都会显示100的值。

// 引用同一个yanggb组件但创建两个个实例
const yanggb = () => import('@/components/yanggb')
const yanggb1 = () => import('@/components/yanggb')
// 注册两个组件实例
components: { yanggb, yanggb1 }
// 在页面上分别调用两个组件实例
<yanggb :value="100"></yanggb>
<yanggb1></yanggb1>

那么这个时候因为两个实例拥有相互独立的私有作用域，也就不会导致相互干扰的结果了，第二个实例的调用不会显示100的值。

参考博客