vue3怎么同时定义三个定时器分别为10秒，20秒，30秒，前端根据弹窗页面选择后点击执行按钮执行对应定时器或点击取消按钮不执行，使用ref方法和script setup里面编写，功能在子组件中，弹窗在父组件中

可以在 Vue 3 中使用 `ref` 和 `setup` 来定义定时器。你可以在父组件中定义一个 `Boolean` 类型的 `showDialog` 变量来控制是否弹窗，同时在子组件中使用 `emit` 向父组件发送事件。以下是一个示例代码：

父组件的模板：

<template>
  <div>
    <button @click="showDialog = true">打开弹窗</button>
    <ChildComponent :show-dialog="showDialog" @start-timer="startTimer" />
  </div>
</template>

父组件的代码：

import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const showDialog = ref(false)
    const timers = [
      { time: 10, timerId: null },
      { time: 20, timerId: null },
      { time: 30, timerId: null }
    ]

    const startTimer = (index) => {
      const timer = timers[index]
      if (!timer.timerId) {
        timer.timerId = setInterval(() => {
          console.log(`Timer ${timer.time} seconds`)
        }, timer.time * 1000)
      }
    }

    return {
      showDialog,
      startTimer
    }
  }
}

子组件的模板：

<template>
  <div v-if="showDialog">
    <h2>请选择定时器:</h2>
    <ul>
      <li v-for="(timer, index) in timers" :key="timer.time">
        <span>{{ timer.time }} 秒</span>
        <button @click="startTimer(index)">执行定时器</button>
      </li>
    </ul>
    <button @click="$emit('close')">取消</button>
  </div>
</template>

子组件的代码：

import { ref } from 'vue'

export default {
  props: {
    showDialog: Boolean
  },
  emits: ['close', 'start-timer'],
  setup(props, { emit }) {
    const timers = [
      { time: 10 },
      { time: 20 },
      { time: 30 }
    ]

    return {
      timers,
      startTimer: (index) => {
        emit('start-timer', index)
        emit('close')
      }
    }
  }
}

在父组件中，我们定义了一个 `showDialog` 变量来控制是否弹窗，并且定义了一个 `timers` 数组来存储三个定时器的时间和 `timerId`。我们还定义了一个 `startTimer` 函数来启动定时器。在子组件中，我们使用 `props` 属性接收父组件传递的 `showDialog` 值，并且使用 `emits` 属性定义了两个自定义事件，分别是 `close` 和 `start-timer`。在子组件中，我们通过 `emit` 方法向父组件触发 `start-timer` 事件来启动定时器，并且触发 `close` 事件来关闭弹窗。