【快应用】销毁自定义组件，避免组件事件被多次触发
【现象描述】
销毁自定义组件时，会多次触发自定义组件的事件
【问题分析】
自定义组件的上层组件上有if的话，值变成false，自定义组件都没有被销毁, 导致自定义组件里的事件都可以被触发
【解决方案】
销毁自定义组件时，if不要写在自定义组件的父节点上，写在自定义组件上
【代码如下】
Hello.ux
<import name="demo-view" src="./demoView/index.ux"></import>
<template>
<!-- template里只能有一个根节点 -->
<div class="container">
<div class="item-container">
<div >
<demo-view if="{{loadNewView}}" click-times="{{clickTimes}}"></demo-view>
</div>
<text class="btn" onclick="addClickTimes">点我</text>
<text class="btn" onclick="reloadDemoView">刷新组件</text>
</div>
</div>
</template>
<script>
export default {
private: {
isShowTab: true,
loadNewView: true,
clickTimes: 0
},
onInit() {
},
addClickTimes() {
this.clickTimes++
},
reloadDemoView() {
console.log("刷新组件========>开始")
this.loadNewView = false
setTimeout(() => {
console.log("刷新组件========>结束")
this.loadNewView = true
}, 50)
}
}
</script>
<style>
.container {
flex: 1;
flex-direction: column;
}
.btn {
height: 80px;
text-align: center;
border-radius: 5px;
margin-top: 60px;
margin-right: 60px;
margin-left: 60px;
color: #ffffff;
font-size: 30px;
background-color: #0faeff;
}
.item-container {
margin-top: 250px;
margin-right: 60px;
margin-left: 60px;
flex-direction: column;
}
</style>
DemoView：
<template>
<div>
<text style="color:red;font-size: 50px">组件{{clickTimes}}</text>
</div>
</template>
<script>
export default {
props: {
clickTimes:{
type:Number,
default:0
}
},
onInit() {
this.$watch('clickTimes','fatherViewClick')
},
fatherViewClick(nVal,Oval){
console.log("组件监听打印========>",nVal)
}
}
</script>欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
