Vue中混入（mixin）的使用

Vue中混入（mixin）的使用

vue2官网解释
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

我的理解
1.一个混入对象可以包含任意组件选项。
在mixin中可定义组件中包含的属性、方法以及生命周期等等
（如：data()、created()、methods）

2.当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
mixin中定义的属性、方法以及生命周期等等在引入组件之后会与组件本身的属性、方法以及生命周期等等进行合并。组件内可以直接调用在mixin中定义的变量及方法。
这个时候就会有一个问题：如果重名谁的优先级更高
在实际操作验证可知：组件内定义的比mixin中定义的变量和方法的优先级高
验证优先级可参考地址：… … … … … … … …

3.混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
mixin可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

官方提供的引入方式有两种：局部混入、全局混入

定义一个mixin

export const mixin = {
  data() {
    return {
      num: 1
    }
  },
  created() {
    this.test()
  },
  methods: {
    test() {
      console.log("hello mixins")
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.局部混入

import { mixin } from '@/assets/js/mixin'
export default {
	mixins: [mixin],
}
1
2
3
4

2.全局混入

import { mixin } from '@/assets/js/mixin'
Vue.mixin(mixin)
1
2