vue在同一个页面重复引用相同组件如何区分二者
更新时间：2022年08月11日 11:43:15 作者：铭净止水
这篇文章主要介绍了vue在同一个页面重复引用相同组件如何区分二者，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
同一个页面重复引用相同组件如何区分二者
1.使用情境
我在同一个vue中引用了同样的一个图层选择的组件，需要区分二者的选择的radio值，如果不做区分，这二者选择的radio值看上去将会一样
2.解决方法
先说原理，这个重复引用的组件虽然一样，但是二者在被创建的时候各自走了一遍生命周期，所以变量之间不冲突。
首先在引用组件中新增一个props，这里命名为spareId,用来区分二者。
然后父组件传值：
然后在子组件raido中引入这个spareId：
这样就能区分二者选择的不同值。
原理是这样，也可根据实际情况灵活使用。
在同一个页面重复引用相同组件时的干扰处理
如标题所说，我们在使用vue.js组件时，会出现在同一个页面会多次使用相同的组件，更特别的是，组件相同，但数据呈现上是完全不同的，有增或有减，但dom交互的处理是一样的，在这样的背景下，有可能引起组件数据跟需求不一致，交互无法运行等问题，这两个问题是比较常见的，由 于组件在初始化时，是共用的作用域，因此，变量数据是一致的，另外一个问题是因此，大部份的情况下，交互编写可能都会考虑到dom元素的选取问题，如果组件中出现多个相同的id,那交互上会出问题，也不足为奇了。
为了解决如上的问题，我们编写组件的时候，需要考虑组件作用域的隔离，dom元素的独立性，一般处理方法是，引用时，采用不同的别名引入多个相同的组件作为父页面的实例，另外一个思路，是通过父元素传递不同的dom来实现交互隔离。至于数据不同，那就可以考虑props来处理了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue fetch中的.then()的正确使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了Vue如何获取元素高度总是不准确的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue filter 过滤器、以及在table中的使用介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue+Koa2 打包后如何进行线上部署，给大家分享了一些问题及解决方法,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了解决vue单页面应用中动态修改title问题,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
详解为element-ui的Select和Cascader添加弹层底部操作按钮
这篇文章主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
最近在学习vue,发现了vue的好多坑,下面这篇文章主要给大家介绍了关于Vue实现登录记住账号密码功能的思路与过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-11-11
这篇文章主要为大家详细介绍了vue实现时间倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了关于vue设置环境变量全流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家介绍了Mixin混入分发Vue组件可复用功能基础示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论