[扼要问题描述]
子组件事件触发不正常,点击会触发父页面的事件
mpvue 版本号:
[mpvue@2.0.0]
最小化复现代码:
[建议提供最小化可运行的代码:附件或文本代码]
<template>
<comment-el :data='commentData' :id="userDetail.userId" @newComment='newComment' @deleteComment='deleteComment'/>
</template>
问题复现步骤:
- [第一步]
删除一条记录,页面并没有更新,于是直接重新获取了数据 - [第二步]
再去点击其他的删除时 并不能触发。并且 元素上面的data-comkey 是一个(未定义)的,并不是数字,如果父页面有绑定的事件 就会触发父页面事件 - [其它...]
观察到的表现:
[在这里描述观察到的表现]
截图或动态图:
![复现步骤截图或gif图片](图片的 url)
1条答案
按热度按时间ovfsdjhp1#
+1,我这边用
unshift
动态调整渲染列表(列表中每个项目又负责一个自定义组件)的时候,会出现很多data-comkey
为undefined
的情况,实际在vendor.js
中,formatVmData
方法里面加入打log的话,发现并没有出现$k
为undefined
的情况,不知道为啥生成出来的wxml在运行阶段就有出现。举例:
比如原本存在列表的元素是
$k=0_1_0
unshift
四个元素之后就变成了$k=0_1_0
$k=0_1_1
$k=0_1_2
$k=undefined
$k=undefined
再次
unshift
四个元素之后:$k=0_1_0
$k=0_1_1
$k=0_1_2
$k=undefined
$k=undefined
$k=undefined
$k=undefined
$k=undefined
$k=undefined
很诡异,但是如果说用
push
,就不会出现undefined
。P.S. 我试过把数据数组重新赋值给数据数组自己,甚至试过让数据数组
reverse
push
reverse
都还是有这个问题。感觉出问题的地方应该在渲染阶段,而不是数据绑定阶段(猜测)。
经过一些尝试,有了一个解决方法。
出现这个问题是在每个
v-for
渲染的item
中,key
指定为item
的ID
的时候出现的,也就是说:如果绑定了
key
,列表发生变化,且item
不在原来的index
上的时候,照理说,vue
会重用元素,而直接更新那个页面元素,不是建立新的页面元素。然而新的页面元素是一点问题都没有。更新之后的
$k
就会变成undefined
。(但这依旧是一个bug,希望可以重视一下)那么我们让每次他的key都不一样,就可以强制重新渲染,我这边用的是
index+','+item.ID
作为新的key
,这样每次unshift
进去之后,都会强制重新渲染(因为key
不一样了)。