组件key

在写代码时遇到一个小问题,代码模拟如下:

  
张三 李四 王五

dictSelect是自己封装过的el-select组件,里面有一个功能是如果options有值,会自动选中第一个值并触发change事件
问题如下:value从张三切换到李四时,options2为空,在组件中查看数据options取到的值也是为空,但是组件会把options1的值渲染出来,如下图所示:

问题

这种问题好解决嘛,加个key就好了。我想dictSelect组件一次只会加载一个,我就没必要在每个dictSelect上都加key了,直接在父元素上加一个key好了,代码如下:

以上代码,同时在value值切换时更新key,但是这样会出现组件加载时选中第一个值会触发一次change事件,key更新时组件更新会再次触发change事件,导致change事件触发两次的问题
解决以上问题只需要,把key加到每个组件上就ok了,并且key不需要使用动态key,只需要使用固定字符串就可以了
代码如下:

你可能感兴趣的:(组件key)