HarmonyOS 鸿蒙Next：Tabs中使用ForEach遍历创建Tab后，对子组件传递currentIndex，使用@Watch会多次触发监视函数

HarmonyOS 鸿蒙Next：Tabs中使用ForEach遍历创建Tab后，对子组件传递currentIndex，使用@Watch会多次触发监视函数
<markdown _ngcontent-huf-c237="" class="markdownPreContainer">

class NewsTypeBean {
id: number = 0;
name: string = ‘’;
}

@Entry
@Component
export struct TabsExample {
@State fontColor: string = ‘#182431’;
@State selectedFontColor: string = ‘#007DFF’;
@State currentIndex: number = 0;
@State tabsList: NewsTypeBean[] = [
{ id: 0, name: ‘全部’ },
{ id: 1, name: ‘国内’ },
{ id: 2, name: ‘国际’ },
{ id: 3, name: ‘娱乐’ },
{ id: 4, name: ‘军事’ },
{ id: 5, name: ‘体育’ },
{ id: 6, name: ‘科技’ },
{ id: 7, name: ‘财经’ }
]
private controller: TabsController = new TabsController();
@Builder
tabBuilder(index: number, name: string) {
Column() {
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
Divider()
.strokeWidth(2)
.color(’#007DFF’)
.opacity(this.currentIndex === index ? 1 : 0)
}.width(‘100%’)
}
build() {
Tabs({ controller: this.controller }) {
ForEach(this.tabsList, (item: NewsTypeBean) => {
TabContent() {
Column() {
NewsList({ currentIndex: $currentIndex })
}.width(‘100%’).height(‘100%’)
}
.tabBar(this.tabBuilder(item.id, item.name))
}, (item: NewsTypeBean) => JSON.stringify(item))
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.animationDuration(400)
.onChange((index: number) => {
this.currentIndex = index
})
.height(‘100%’)
.backgroundColor(’#F1F3F5’)
}
}
@Component
export default struct NewsList {
@Link @Watch(‘changeCategory’) currentIndex: number;
changeCategory() {
console.log(‘Watch’, this.currentIndex);
}
build() {
Text(this.currentIndex.toString())
.fontSize(20)
.fontColor(Color.Black)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>