页面的风格不同，但是执行的方法和需要的数据类似时，我们可以用到mixins
extends和mixin作用类似
mixins和extends 的引入方式
import { mixin } from './mixin'
import { extend } from './extend'
export default {
mixins: [mixin], // 数组方式，可以引入多个
extends: extend // 只能单个引入
}
在vue-cli中
// index.vue
<template></template>
<script>
import { mixin } from "./mixin";
import { extend } from "./extend";
export default {
extends: extend,
mixins: [mixin],
data() {
return {
vueData: "123",
};
},
methods: {
vueMethods() {
console.log("vue methods");
},
},
created() {
console.log("vue created");
},
mounted() {
console.log("vue mounted");
},
};
</script>
<style>
</style>
// mixin.js
export const mixin = {
data() {
return {
mixinData: '123123'
}
},
methods: {
mixinMethods(){
console.log('mixin methods')
}
},
created () {
console.log('mixin created')
},
mounted () {
console.log('mixin mounted')
}
}
//extend.js
export const extend = {
data(){
return {
extendData: '123123123'
}
},
methods: {
extendMethods(){
console.log('extend methods')
}
},
mounted () {
console.log('extend mounted')
},
created () {
console.log('extend created')
}
}
输出为
// extend created
// mixin created
// vue created
// extend mounted
// mixin mounted
// vue mounted
也就是说执行顺序为 extend > mixin > vue
