这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战

前言：

哈喽，大家晚上好啊，周一一眨眼就过去了，我们继续更文的路途，前端小白不迷路 - 今天来介绍下Vue中mixins的使用方法。

为什么要有mixins

在项目中，如果有多个组件的功能是类似的，比如一些共同的请求数据方法，如果每个页面都引入，然后写很长的传参逻辑，其他的页面复制这段逻辑代码，这样代码会非常的冗余，这我们该怎么办？于是便引出了mixins这个混入概念，代码不完全一样，但主要功能很相像。

mixins的介绍

官方介绍如下：它是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

mixins使用说明

mixins就是一个对象，该对象可以包含组件中所有的配置，里面涵盖了一些组件常用的一些功能，在项目中，一般新建一个mixins文件夹，里面存放一些重复代码的js文件。

代码实例如下，在mixins文件夹中新建sing.js文件，该文件中可以包含组件中所有的配置，并将该对象导出，因为这里就只有一个对象，采用的是默认导出。

// 该对象可以包含组件中所有的配置
export default {
  data () {
    return {
      dynasty: '唐代'
    }
  },
  created () {
    this.sing()
  },
  methods: {
    sing () {
      console.log('白日依山尽')
    }
  },
  destroyed () {
    console.log('黄河入海流')
  }
}

带来的效果就是，我们进入组件以及离开组件的时候就会执行相应的方法。

注意点

当前组件本身的优先级要高于混入对象的优先级。但是注意不是覆盖，而是合并，比如命名相同的变量名，本身组件与混入的变量冲突，会产生覆盖的效果，但是如果是不相同的变量名，则都生效，方法名也是一样。

后记

vue3中提供了更好用的api，叫composition api ,感兴趣的小伙伴可以了解一下~，今天的分享就到这里啦，有疑问或者文中有错误还望大家指出，拜拜啦