vue不同按钮发到一个组件携带不同请求

在Vue中，如果你想要不同的按钮触发发送到同一组件的不同请求，你可以通过以下步骤实现：

1. **事件发射（Event Emission）**: 每个按钮关联一个特定的事件，比如`clickButtonA`, `clickButtonB`等。在按钮的点击事件处理器中，触发对应事件并传递所需的参数（如请求URL或其他特定数据）。

<button @click="clickButtonA()">按钮A请求</button>
<button @click="clickButtonB()">按钮B请求</button>

<child-component :requestUrl="buttonARequestUrl" :data="buttonAData"></child-component>

methods: {
  clickButtonA() {
    // 假设buttonARequestUrl是一个变量或者函数，根据实际情况填充不同的URL
    this.buttonARequestUrl = 'urlForButtonA';
    this.buttonAData = ...; // 数据也可以类似地设置

    // 发送请求
    sendDataToChild();
  },
  clickButtonB() {
    // 类似地，为按钮B设置不同的URL和数据
    this.buttonBRequestUrl = 'urlForButtonB';
    this.buttonBData = ...;

    sendDataToChild();
  }

  sendDataToChild() {
    this.$emit('sendRequest', { url: this.buttonXRequestUrl, data: this.buttonXData });
  }
}

然后，在子组件的模板中，监听这个通用的`sendRequest`事件，根据传入的参数做不同的处理。

<template>
  <button @click="$emit('sendRequest', requestData)">{{ buttonText }}</button>
</template>

<script>
export default {
  props: {
    requestUrl: String,
    data: Object
  },
  methods: {
    sendRequest(data) {
      fetch(this.requestUrl, { method: 'POST', body: data.data })
        .then(response => response.json())
        .then(result => /* 处理返回数据 */);
    }
  }
};
</script>