an error when I use component:clone in a component

[hr1201]

When I clone a div at the same time, I don't know why the component:clone event is triggered multiple times. Is there a better way to listen for clone events in a component?

Components.addType('minigram-addCarousel', {
    model: {
      defaults: {
        name: 'addCarousel',
        droppable: false,
        attributes: {
          class: 'miniprogram-carousel-container',
          'data-gjs-type': "minigram-addCarousel"
        },
        components: [
          {
            tagName: 'div',
            attributes: {
              class: 'miniprogram-carousel'
            },
            components: [
              {
                tagName: 'div',
                attributes: {
                  class: 'miniprogram-carousel-slide'
                },
                components: [
                  {
                    type: 'imgLink',
                    attributes: {
                      class: 'miniprogram-carousel-slide-img',
                      src: 'https://img.js.design/assets/img/662b538a36b238525bcd0880.png#3635c00a349b3c7e3e02cbede24090d8',
                      alt: 'Image 1'
                    },
                  },
                  {
                    tagName: 'div',
                    attributes: {
                      class: 'miniprogram-carousel-caption'
                    },
                    components: [
                      {
                        type: 'text',
                        content: '端午文化',
                        attributes: {
                          class: 'miniprogram-carousel-caption-p',
                        }
                      },
                      {
                        type: 'text',
                        content: '品牌全案服务',
                        attributes: {
                          class: 'miniprogram-carousel-caption-p',
                        }
                      }
                    ]
                  },
                ]
              },
            ]
          },
          {
            tagName: 'div',
            attributes: {
              class: 'miniprogram-carousel-indicators'
            },
            components: [
              {
                tagName: 'span',
                attributes: {
                  class: 'miniprogram-dot miniprogram-active',
                },
              },
              {
                tagName: 'span',
                attributes: {
                  class: 'miniprogram-dot',
                },
              },
              {
                tagName: 'span',
                attributes: {
                  class: 'miniprogram-dot',
                },
              },
            ]
          }
        ],
        styles: ` `,
        script() {
          window.clearInterval(sessionStorage.getItem(this.attributes.id.value))
          var thx = document.getElementById(this.attributes.id.value);
          let slides = thx.getElementsByClassName("miniprogram-carousel-slide");
          let indicators = thx.querySelector(".miniprogram-carousel-indicators")
          indicators.innerHTML = '';

          for (let i = 0; i < slides.length; i++) {
            let node = document.createElement('span')
            node.className = 'miniprogram-dot'
            indicators.appendChild(node)
          }

          let dots = thx.getElementsByClassName("miniprogram-dot");
          dots[0].className = 'miniprogram-dot miniprogram-active'
          for (let i = 0; i < dots.length; i++) {
            dots[i].onclick = function () {
              currentSlide(i + 1);
            }
          }

          function currentSlide(n) {
            showSlides(slideIndex = n);
          }

          function showSlides(n) {
            let i;
            if (n > slides.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = slides.length }
            for (i = 0; i < slides.length; i++) {
              slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
              dots[i].className = dots[i].className.replace(" miniprogram-active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " miniprogram-active";
          }
        }
      },
    },

  // the problem appears in the following code
    view: {
      onRender({ el, model }) {
        model.getChildAt(0).forEachChild(child => {
          child.on('component:clone', function (originalModel, cloneModel) {
            console.log('clone')
            if (model.getChildAt(0).get('components').length == 6) return;
            model.trigger("change:script"); 
          })
          child.on('component:remove:before', function (model1, removeFn, options) {
            console.log('remove')
            if (model.getChildAt(0).get('components').length == 2) {
              options.abort = true;
              return;
            }
            model.trigger("change:script");
          })
        })
      },
    },
  })

[artf]

@hr1201 #6260 (comment)