比如父组件 A 有一个for循环 创建了N个子组件，且子组件中有watch监听
这样创建完成后 当点击某个按钮时 子组件的watch会触发N次 N为几就触发几次
这个怎么解决呀
比如A中创建了10个子组件 每个子组件显示不同的图片 当点击这个图片时则给图片点击的位置加上一个小红旗的标记 当显示小红旗的时候 要弹出一个提示 用watch监听了点击的x坐标 发现创建了多少个子组件就会执行多少次 这个怎么隔离开呢
晒网
- 发布：2024-08-26 02:03
- 更新：2024-08-26 19:57
- 阅读：161
watch在循环创建组件中多次数发
分类：uni-app x
这是你传参的问题吧，都指向了同一个数据，你这样试试
<template>
<view>
<view style="width: 100%; height: 100%;flex-direction: column;">
<pf-childs :clickx="clickx[index]" @click="textwatch(index)" v-for="item,index in textwatchlist" :key="item"></pf-childs>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
clickx: [1,2,3,4,5],
textwatchlist: [
{
names: '1'
},
{
names: '2'
},
{
names: '3'
},
{
names: '4'
},
{
names: '5'
}
],
}
},
onLoad() {
},
methods: {
textwatch(index:number) {
this.clickx[index]++
}
}
}
</script>
<style>
.logo {
height: 100px;
width: 100px;
margin: 100px auto 25px auto;
}
.title {
font-size: 18px;
color: #8f8f94;
text-align: center;
}
</style>
晒网 (作者) - 只晒网不打渔
前端组件 通用组件代码
<template>
<view style="height: 50px;width: 366px;margin-bottom: 11px;background-color: blueviolet;">
{{clickx}}
</view>
</template>
<script>
export default {
data() {
return {
}
},
props: {
clickx: {
type: Number,
default: 0
}
},
watch: {
clickx(newval:number,oldval:number) {
if (newval > oldval) {
console.log('------', newval '->' oldval)
}
}
}
} </script>
<style>
</style>
父组件
<view style="width: 100%; height: 100%;flex-direction: column;">
<pf-childs :clickx="clickx" @click="textwatch" v-for="item in textwatchlist" :key="item"></pf-childs>
</view>
点击事件
textwatch() {
this.clickx
},
list数据
textwatchlist: [
{
names: '1'
},
{
names: '2'
},
{
names: '3'
},
{
names: '4'
},
{
names: '5'
}
], 点击后输出的结果
19:11:00.950 ------ 3->2 at uni_modules/pf-childs/components/pf-childs/pf-childs.vue:22
19:11:00.951 ------ 3->2 at uni_modules/pf-childs/components/pf-childs/pf-childs.vue:22
19:11:00.952 ------ 3->2 at uni_modules/pf-childs/components/pf-childs/pf-childs.vue:22
19:11:00.953 ------ 3->2 at uni_modules/pf-childs/components/pf-childs/pf-childs.vue:22
19:11:00.954 ------ 3->2 at uni_modules/pf-childs/components/pf-childs/pf-childs.vue:22
晒网 (作者)
次哦 是呀 我应该传for循环里面item的某个属性的 结果图省事 绑了个其它变量 阿门
2024-08-26 21:36