vue的mixin的使用

mixins_官方文档

1. 引入

import { Vue, Component, Mixins } from 'vue-property-decorator'

2. 拓展mixins

export default class extends Mixins(···) {}

注意点 ：

选项合并

• 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

  methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的 键值对

  （当 组件 和 混入 出现同名数据时，组件的数据会覆盖混入的数据）

  例

  var mixin = {
    data: function () {
      return {
        message: 'hello',
        foo: 'abc'
      }
    }
  }
  
  new Vue({
    mixins: [mixin],
    data: function () {
      return {
        message: 'goodbye',
        bar: 'def'
      }
    },
    created: function () {
      console.log(this.$data)
      // => { message: "goodbye", foo: "abc", bar: "def" }
    }
  })
  

• 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

  (当 组件 和 混入 调用了同样的钩子， 则会进行合并，并且会先执行混入的)

  例

  var mixin = {
    created: function () {
      console.log('混入对象的钩子被调用')
    }
  }
  
  new Vue({
    mixins: [mixin],
    created: function () {
      console.log('组件钩子被调用')
    }
  })
  
  // => "混入对象的钩子被调用"
  // => "组件钩子被调用"
  

全局混入 （不要使用！！！因为它将影响每一个之后创建的 Vue 实例）

```
Vue.mixin({ ··· })
```