【现象描述】
销毁自定义组件时，会多次触发自定义组件的事件
【问题分析】
自定义组件的上层组件上有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>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> <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>