Vue中mixin(混入)的使用方法
官方介绍
概念:可以把多个组件共用的配置提取成一个混入对象
定义一个混入对象(mixin/index.js)
const myMixin = {
data() {
return {
name: "xxxxx",
age: 20
}
},
created() {
console.log('我是mixin');
},
}
export default myMixin
局部混入
组件中引用
<template>
<div>
</div>
</template>
<script>
import myMixin from "../mixin/index"; //引入mixin文件
export default {
name: "Demo",
mixins: [myMixin], //mixin配置项
data() {
return {};
},
};
</script>
全局混入
main.js
import myMixin from './mixin/index'
Vue.mixin(myMixin)
效果展示
注意事项
- 混入对象的钩子将在组件自身钩子之前调用。
- 值为对象的选项,例如
methods
、components
和directives
,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。 - 一旦使用全局混入,它将影响每一个之后创建的 Vue 实例
const myMixin = {
data() {
return {
name: "gaotianhang",
age: 20
}
},
methods: {
getData() {
console.log("我是mixin中的方法");
},
},
created() {
console.log('我是mixin中的created');
},
}
export default myMixin
<template>
<div>
</div>
</template>
<script>
import myMixin from "../mixin/index";
export default {
name: "Father",
mixins: [myMixin],
data() {
return {};
},
methods: {
getData() {
console.log("我是组件中的方法");
},
},
created() {
console.log("我是组件中的created");
this.getData();
},
};
</script>