vue如何自定义封装API组件

Vue是一套用于构建用户界面的渐进式框架，可以轻松地封装API组件来复用代码和简化项目架构。下面是Vue自定义封装API组件的完整攻略:

步骤

1. 创建一个Vue组件

<template>
  <button @click="login">{{ label }}</button>
</template>

<script>
export default {
  props: {
    label: String,
    url: String,
    method: {
      type: String,
      default: 'post'
    },
  },
  methods: {
    login() {
      // 调用API
      axios({
        url: this.url,
        method: this.method
      })
        .then(response => this.$emit('success', response.data))
        .catch(error => this.$emit('fail', error))
    }
  }
}
</script>

1. 在组件中引入依赖

import axios from 'axios'

1. 在Vue组件中使用自定义封装API组件

<template>
  <div>
    <ApiButton
      label="登录"
      url="/login"
      method="post"
      @success="handleSuccess"
      @fail="handleFail"
    />
  </div>
</template>

<script>
import ApiButton from '@/components/ApiButton.vue'

export default {
  components: {
    ApiButton
  },
  methods: {
    handleSuccess(responseData) {
      console.log(responseData)
    },
    handleFail(error) {
      console.error(error)
    }
  }
}
</script>

1. 在main.js中全局注册组件

import Vue from 'vue'
import ApiButton from '@/components/ApiButton.vue'

Vue.component('api-button', ApiButton)

1. 通过指令的方式调用组件

<template>
  <div>
    <button v-api-button="{ url: '/login', method: 'post', label: '登录', success: handleSuccess, fail: handleFail }">登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleSuccess(responseData) {
      console.log(responseData)
    },
    handleFail(error) {
      console.error(error)
    }
  }
}
</script>

以上步骤是Vue自定义封装API组件的完整攻略，通过以上步骤，我们可以轻松的实现API的封装和调用，简化代码和提高开发效率。

示例1

<template>
  <div>
    <ApiButton
      label="登录"
      url="/login"
      method="post"
      @success="handleSuccess"
      @fail="handleFail"
    />
  </div>
</template>

<script>
import ApiButton from '@/components/ApiButton.vue'

export default {
  components: {
    ApiButton
  },
  methods: {
    handleSuccess(responseData) {
      console.log(responseData)
    },
    handleFail(error) {
      console.error(error)
    }
  }
}
</script>

在上面的示例中，我们创建了一个ApiButton组件，通过传入props控制按钮的显示内容和调用API的选项。

示例2

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <button v-api-button="{ url: `/api/items/${item.id}`, method: 'delete', label: '删除', success: handleSuccess, fail: handleFail }">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'foo' },
        { id: 2, name: 'bar' },
        { id: 3, name: 'baz' }
      ]
    }
  },
  methods: {
    handleSuccess(responseData) {
      console.log(responseData)
    },
    handleFail(error) {
      console.error(error)
    }
  }
}
</script>

在上面的示例中，我们使用了一个指令方式调用ApiButton组件，实现了批量调用API删除元素的操作。