【現象描述】
銷毀自定義元件時，會多次觸發自定義元件的事件
【問題分析】
自定義元件的上層元件上有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>