mpvue 子组件事件触发不正常,点击会触发父页面的事件

piwo6bdm  于 3个月前  发布在  其他
关注(0)|答案(1)|浏览(93)

[扼要问题描述]

子组件事件触发不正常,点击会触发父页面的事件
mpvue 版本号:
[mpvue@2.0.0]

最小化复现代码:

[建议提供最小化可运行的代码:附件或文本代码]

<template>
<comment-el :data='commentData' :id="userDetail.userId" @newComment='newComment' @deleteComment='deleteComment'/>
</template>

问题复现步骤:

  1. [第一步]
    删除一条记录,页面并没有更新,于是直接重新获取了数据
  2. [第二步]
    再去点击其他的删除时 并不能触发。并且 元素上面的data-comkey 是一个(未定义)的,并不是数字,如果父页面有绑定的事件 就会触发父页面事件
  3. [其它...]

观察到的表现:

[在这里描述观察到的表现]

截图或动态图:

![复现步骤截图或gif图片](图片的 url)

ovfsdjhp

ovfsdjhp1#

+1,我这边用 unshift 动态调整渲染列表(列表中每个项目又负责一个自定义组件)的时候,会出现很多 data-comkeyundefined 的情况,实际在 vendor.js 中, formatVmData 方法里面加入打log的话,发现并没有出现 $kundefined 的情况,不知道为啥生成出来的wxml在运行阶段就有出现。

举例:
比如原本存在列表的元素是

  • 元素0 $k=0_1_0

unshift 四个元素之后就变成了

  • 新元素3$k=0_1_0
  • 新元素2$k=0_1_1
  • 新元素1$k=0_1_2
  • 新元素0$k=undefined
  • 元素0 $k=undefined

再次 unshift 四个元素之后:

  • 新新元素3$k=0_1_0
  • 新新元素2$k=0_1_1
  • 新新元素1$k=0_1_2
  • 新新元素0$k=undefined
  • 新元素3 $k=undefined
  • 新元素2 $k=undefined
  • 新元素1 $k=undefined
  • 新元素0 $k=undefined
  • 元素0 $k=undefined

很诡异,但是如果说用 push ,就不会出现 undefined
P.S. 我试过把数据数组重新赋值给数据数组自己,甚至试过让数据数组 reversepushreverse 都还是有这个问题。
感觉出问题的地方应该在渲染阶段,而不是数据绑定阶段(猜测)。

经过一些尝试,有了一个解决方法。
出现这个问题是在每个 v-for 渲染的 item 中, key 指定为 itemID 的时候出现的,也就是说:
如果绑定了 key ,列表发生变化,且 item 不在原来的 index 上的时候,照理说, vue 会重用元素,而直接更新那个页面元素,不是建立新的页面元素。然而新的页面元素是一点问题都没有。
更新之后的 $k 就会变成 undefined 。(但这依旧是一个bug,希望可以重视一下)
那么我们让每次他的key都不一样,就可以强制重新渲染,我这边用的是 index+','+item.ID 作为新的 key ,这样每次 unshift 进去之后,都会强制重新渲染(因为 key 不一样了)。

相关问题