Info
代码就是最好的语言，废话不多说，我们直接看示例
mixin.vue
<template>
<div></div>
</template>
<script>
import mixin from "../mixin/mixin";
export default {
mixins: [mixin],
data(){
return {
hello : "mixin.vue",
count : 1
}
},
created() {
console.log("hello from mixin.vue");
console.log(this.hello);
this.text = "has changed"
this.add();
this.hi();
},
methods: {
hi() {
console.log("hi method from mixin.vue");
console.log(this.count);
},
say() {
console.log('say something from mix.vue');
}
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
../mixin/mixin.js
export default {
data() {
return {
hello: "mixin.js",
text: "change me"
}
},
created() {
console.log('hello from mixin.js');
this.say();
},
mounted() {
console.log(this.text);
this.hi();
},
methods: {
hi() {
console.log("我到底会不会执行！")
},
add() {
this.count++
},
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
运行结果
# mixin.js:9 触发混入中created生命周期
hello from mixin.js
# mixin.js:10 执行当前组件中的say方法
say something from mix.vue
# mixin.vue:15 触发当前组件中的created生命周期
hello from mixin.vue
# mixin.vue:16 打印当前组件中的hello属性
mixin.vue
# mixin.vue:23 触发当前组件的hi方法
hi method from mixin.vue
# mixin.vue:18 执行混入中的add方法，使得count++，后经过
# mixin.vue:19 中的hi方法打印出count
2
# mixin.vue:17 当前组件修改了混入中text属性的值，经触发混入中mounted生命周期时，
# mixin.js:13 打印出混入中text的值
has changed
# mixin.js:14 在混入中执行hi方法，发现其仍执行的是mixin.vue中的hi方法，证明了mixin.vue覆盖了混入中的方法
hi method from mixin.vue
2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
再解析一下：
- 当引入的 mixin 中与当前组件同时存在同样的方法和属性时，将不会报错，当前组件的属性方法将覆盖混入中的
- 混入与当前组件的生命周期分别执行，同周期先行执行混入中的，不同周期按先后顺序执行
- 混入与当前组件能相互读取操作的对方的属性与方法