mixins extends 用法

页面的风格不同，但是执行的方法和需要的数据类似时，我们可以用到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