vue-mixins混入处理

定义

mixins（混入）：一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins 是一个 js 对象，它可以包含我们组件script中的任意功能选项，如：data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中，当组件使用 mixins 对象，所有 mixins 对象的选项都将被扩展到该组件本身的选项中来，这样就可以提高代码的重用性，并易于后期的代码维护。

用法

在src文件夹下创建mixins文件夹，再在文件夹中创建js文件

export default {
  // 此处编写的就是 Vue组件实例的 配置项，通过一定语法，可以直接混入到组件内部
  // data methods computed 生命周期函数 ...
  created () {
    console.log('嘎嘎')
  },
  data () {
    return {
      title: '标题'
    }
  },
  methods: {
    sayHi () {
      console.log('你好')
    }
  }
}

在vue文件中导入

import loginConfirm from '@/mixins/loginConfirm'
export default {
  mixins: [loginConfirm,...]//可以混入多个，后面的优先级更高，会覆盖前面的
}

这样js文件里的数据和方法就混入到了对应的vue文件中

调用

this.title
this.sayHi()

注意点：
1. 如果导入的mixins的js文件 和 组件内，提供了同名的 data 或 methods， 则组件内优先级更高
2. 如果编写了生命周期函数，则mixins中的生命周期函数 和 页面的生命周期函数，会用数组管理，统一执行，不会冲突