浅浅学习vue简单封装

在Vue开发中，我们经常需要封装一些通用的组件或者功能，以便在不同的页面或项目中复用。本文将介绍如何使用Vue技术进行封装。

组件封装

组件封装是Vue开发中最常见的封装方式。我们可以将一些通用的UI组件或者业务组件进行封装，以便在不同的页面或项目中复用。

UI组件封装

UI组件封装是最常见的组件封装方式。我们可以将一些通用的UI组件进行封装，例如按钮、输入框、下拉框等等。下面是一个简单的按钮组件封装示例：

<template>
  <button :class="classes" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  computed: {
    classes() {
      return [
        'my-button',
        `my-button--${this.type}`,
        `my-button--${this.size}`
      ]
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.my-button {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 16px;
  transition: background-color 0.3s ease;
}

.my-button--default {
  background-color: #f0f0f0;
  color: #333;
}

.my-button--primary {
  background-color: #007bff;
  color: #fff;
}

.my-button--small {
  font-size: 12px;
  padding: 4px 8px;
}
</style>

在上面的示例中，我们定义了一个名为MyButton的组件，并且定义了两个props：type和size。type用于指定按钮的类型，可以是default或者primary，默认为default；size用于指定按钮的大小，可以是medium或者small，默认为medium。我们使用了计算属性classes来动态计算按钮的样式类，然后在模板中使用:class指令绑定样式类。我们还使用了插槽来支持自定义按钮的文本内容，并且在点击按钮时触发了click事件。

业务组件封装

除了UI组件，我们还可以封装一些业务组件，例如表单组件、列表组件、分页组件等等。下面是一个简单的表单组件封装示例：

<template>
  <form @submit.prevent="handleSubmit">
    <slot></slot>
  </form>
</template>

<script>
export default {
  name: 'MyForm',
  props: {
    initialValues: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      values: this.initialValues
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit', this.values)
    }
  }
}
</script>

在上面的示例中，我们定义了一个名为MyForm的组件，并且定义了一个prop：initialValues，用于指定表单的初始值。我们在组件内部使用了一个values变量来保存表单的值，并且在表单提交时触发了submit事件，并将表单的值作为参数传递给事件处理函数。

功能封装

除了组件封装，我们还可以封装一些通用的功能，例如网络请求、本地存储、表单验证等等。下面是一个简单的网络请求封装示例：

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://api.example.com'
})

export function get(url, params) {
  return api.get(url, { params })
}

export function post(url, data) {
  return api.post(url, data)
}

在上面的示例中，我们使用了axios库来进行网络请求，并且封装了两个函数：get和post。这两个函数分别用于发送GET请求和POST请求，并且可以传递URL和参数或者数据。我们还使用了create方法来创建了一个名为api的axios实例，并且指定了基础URL。

总结