vue mixins

官方定义

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

使用

首先我们新建一个 mixin.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
props: {
data: Object
},
data() {
return {
commonData: ""
};
},
methods: {
updated() {},
cancel() {}
}
};

然后在需要的 A.vue 文件中挂载

1
2
3
4
5
6
7
8
9
10
11
12
import mixins from "./mixins";

export default {
mixins: [mixins],
props: {},
data() {
return {};
},
watch: {},
mounted() {},
methods: {}
};

这样我们就可以在 A.vue 中使用 updated 和 cancel 方法了。

假如我们在 A.vue 中再写一个 cancel 方法,那么当调用 cancel 方法时,就是调用 A.vue 自身的 cancel 方法。