以下这段代码中,是有个按钮，有个loading ,绑定点击事件，模拟请求完成后loading为true

<template>
  <div>
    <el-button :loading="loading" @click="onClick"></el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
async function onClick() {
  loading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
  } finally {
    loading.value = false
  }
}
</script>

上述代码中能不能进行优化，能不能封装这个组件，在这个组件内部来处理这个问题，在需要的地方直接调这个按钮的组件就可以了
index.vue的代码如下：

<template>
  <div>
    <MyButton type="primary" @click="onclick">按钮</MyButton>
  </div>
</template>

<script setup lang="ts">
import MyButton from './MyButton.vue';
async function onclick() {
  console.log('点击按钮')
  await new Promise(resolve => setTimeout(resolve, 1000))
}
</script>

MyButton组件代码如下

<template>
  <div>
    <!-- <el-button :loading="loading" v-bind="$attrs" @click="onClick">
      <slot></slot>
    </el-button> -->
    <el-button :loading="loading" v-bind="props" @click="onClick">
      <slot></slot>
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { ref,useAttrs } from 'vue'
import type { ButtonProps } from 'element-plus'
defineOptions({
  inheritAttrs: false, //不继承父组件的属性
})
//这个attrs是跟$attrs是一样的是用来接收父组件传递过来的所有属性
const attrs = useAttrs()
console.log("attrs===>:",attrs)
const loading = ref(false)
//去除里面的loading属性
const props = defineProps<Partial<Omit<ButtonProps,'loading'>>>()
async function onClick() {
  loading.value = true
  try {
    // await new Promise(resolve => setTimeout(resolve, 1000))
    //通过attrs获取父组件传递过来onclick方法
    console.log('调用外部点击事件')
    //@ts-ignore
    await attrs?.onClick?.()
  } finally {
    loading.value = false
  }
 
}
</script>

以上buttom组件的loading封装完成了，比如要二次封装表格，然后传的函数是异步的，只要是异步，涉及到loading的都可以去封装一下