HarmonyOS鸿蒙Next中【快应用】销毁自定义组件，避免组件事件被多次触发

HarmonyOS鸿蒙Next中【快应用】销毁自定义组件，避免组件事件被多次触发 【现象描述】

销毁自定义组件时，会多次触发自定义组件的事件

【问题分析】

自定义组件的上层组件上有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>