vue3 父组件事件控制子组件的定时器实现

父组件v-for循环出子组件(我的是文字逐字展示定时器,setInterval)
之前在子组件控制关闭定时器一直只能关闭第一个定时器,后续定时器id无法赋值,所以后续的无法关闭,下边开始看我的代码:
1.这一块是我的子组件定时器代码:

// 开始逐个显示文字
const startDisplaying = () => {
  if (props.historyVal) {
    index.value = 0
    if (store.state.boolValBot == false) {
      const intervalId = setInterval(() => {
        if (index.value < props.content.length) {
          displayedText.value += props.content[index.value]
          index.value++
        } else {
          clearInterval(props.id) // 清除当前定时器
          const indexToRemove = intervalIds.value.indexOf(props.id)
          if (indexToRemove !== -1) {
            intervalIds.value.splice(indexToRemove, 1) // 从数组中移除当前定时器的ID
          }
        }
      }, 50) // 这里的50是间隔毫秒数，可以根据需要调整
      intervalIds.value.push(intervalId) // 将新的定时器ID添加到数组中
    }
  } else {
    displayedText.value = props.content
  }
}

2.这一块是定时器关闭的代码:

const stopDisplaying = () => {
  intervalIds.value.forEach((id) => clearInterval(id)) // 清除所有定时器
  intervalIds.value = [] // 清空定时器 ID 数组
}

3.将子组件的关闭事件暴露给父组件:

defineExpose({
  stopDisplaying
})

4.父组件调用:父组件调用子组件的地方加入ref="childRefs"  这里明明应该是可以随便的,只需要和下边的const childRefs = ref([]) 创建一样就可以,还有子组件定义一个事件去调用关闭定时器的功能

<LeftItem
            :id="item.id"
            :content="item.content"
            :type="item.type"
            :historyVal="historyVal"
            v-else
            @confirm="handleConfirm"
            ref="childRefs"
          ></LeftItem>
<div class="botFun" v-if="store.state.boolValBot == false">
   <div class="botFun-flex" @click="botFun">
      <div class="botFun-back"></div>
      <span>停止回答</span>
   </div>
</div>



const childRefs = ref([])


const botFun = () => {
  childRefs.value.forEach((child) => {
    if (child) {
      child.stopDisplaying()
    }
  })
}