怎么把<script> export default { data() { return { activeIndex: '1', activeIndex2: '1' }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } } } </script>这串代码改成<script setup格式的>

好的，下面是将原来的 `<script>` 标签改写成 `<script setup>` 标签的代码：

<template>
  <div>
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">导航一</el-menu-item>
      <el-menu-item index="2">导航二</el-menu-item>
      <el-menu-item index="3">导航三</el-menu-item>
    </el-menu>
    <el-menu :default-active="activeIndex2" mode="vertical" @select="handleSelect">
      <el-menu-item index="1">导航一</el-menu-item>
      <el-menu-item index="2">导航二</el-menu-item>
      <el-menu-item index="3">导航三</el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
  import { getCurrentInstance } from 'vue';

  const { proxy } = getCurrentInstance();

  const activeIndex = '1';
  const activeIndex2 = '1';

  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath);
  }

  // 将数据和方法暴露给模板使用
  return {
    activeIndex,
    activeIndex2,
    handleSelect
  }
</script>

在上面的代码中，我们使用了 `getCurrentInstance()` 函数来获取组件实例，然后使用 `proxy` 属性获取组件实例的代理。这个代理对象可以让我们像在 `data()` 和 `methods()` 中一样定义和访问数据和方法。

需要注意的是，在 `<script setup>` 中，我们不能像在 `<script>` 中那样使用 `export default` 导出选项对象，而是需要使用 `return` 语句来返回一个对象，该对象包含了需要暴露给模板的数据和方法。