Vue中mixin混入用法

• 在src目录下创建一个mixins文件夹，文件夹下新建自己要定义的混入对象js文件

// minix.js
// 定义一个混入对象
export const mixin = {
  data() {
    return {
      num: 1
    }
  },
  created() {
    this.fun1()
    this.fun2()
    console.log('created mixin')
  },
  methods: {
    fun1() {
      console.log('fun1 mixin')
    },
    fun2() {
      console.log('fun2 mixin')
    },
  }
}

• 在组件中使用

...
<script>
  import {mixin} from '@/mixins/mixin.js'
  export default {
    mixins: [mixin]
  }
</script>

特点

1. 方法和参数在组件间不共享

例如：组件1和组件2中都引入了 minix.js

组件1 ：对 num + 1 操作 --> 输出 num 的值为 2
组件2：                    输出 num 的值为 1

2. 函数：例如created() 、mounted() 等，会进行合并调用,且同名函数先执行mixin中的同名函数

...
<script>
  import {mixin} from '@/mixins/mixin.js'
  export default {
    mixins: [mixin],
    created() {
      console.log('created component')
    }
  }
</script>
...

控制台输出结果：
created mixin
created component

3. 对象：例如 methods，选项会被合并，键发生冲突时， 组件中的方法会覆盖mixin混入对象中的方法

...
<script>
  import {mixin} from '@/mixins/mixin.js'
  export default {
    mixins: [mixin],
    methods: {
      fun1() {
        console.log('fun1 component')
      },
      fun3() {
        console.log('fun3 component')
      },
    }
  }
</script>
...

控制台输出结果：
fun1 component
fun2 mixin
fun3 component