具有三个不同编号的按钮的Vue组件

<template>
  <div>
    <button @click="onClick(1)">Button 1</button>
    <button @click="onClick(2)">Button 2</button>
    <button @click="onClick(3)">Button 3</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick(number) {
      // 处理点击事件
      console.log("Button " + number + " clicked");
    }
  }
}
</script>

<style>
button {
  margin: 5px;
  padding: 10px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #aaa;
}
</style>

<template>
  <div>
    <!-- 其他组件内容 -->
    <button-group></button-group>
    <!-- 其他组件内容 -->
  </div>
</template>

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

export default {
  components: {
    ButtonGroup
  }
}
</script>