在vue3中存在3个按钮，按钮是根据后台的数据循环生成不同的三个按钮，并且不同按钮绑定的事件不同名，并且每个按钮的不同事件传出不同的值

在Vue3中，可以使用v-for指令循环生成按钮，并且可以使用@click指令绑定不同的事件，事件名可以在后台数据中进行定义。同时，可以使用$emit方法在事件中传出不同的值。

代码示例：

<template>
  <div>
    <button v-for="(button, index) in buttons" :key="index" @click="handleButtonClick(button.eventName)">
      {{ button.text }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: [
        { text: '按钮1', eventName: 'event1' },
        { text: '按钮2', eventName: 'event2' },
        { text: '按钮3', eventName: 'event3' }
      ]
    }
  },
  methods: {
    handleButtonClick(eventName) {
      // 根据不同的事件名进行不同的操作，可以根据需要传递不同的参数
      switch(eventName) {
        case 'event1':
          this.$emit('event1', '值1');
          break;
        case 'event2':
          this.$emit('event2', '值2');
          break;
        case 'event3':
          this.$emit('event3', '值3');
          break;
      }
    }
  }
}
</script>

在父组件中可以监听不同的事件，并且在事件处理函数中获取传出的不同值：

<template>
  <div>
    <my-buttons @event1="handleEvent1" @event2="handleEvent2" @event3="handleEvent3"></my-buttons>
  </div>
</template>

<script>
import MyButtons from './MyButtons.vue';

export default {
  components: {
    MyButtons
  },
  methods: {
    handleEvent1(value) {
      console.log('事件1的值为：', value);
    },
    handleEvent2(value) {
      console.log('事件2的值为：', value);
    },
    handleEvent3(value) {
      console.log('事件3的值为：', value);
    }
  }
}
</script>