Vue 中mixins,extends,class簡單使用

demo:  index.vue, feiMixins,feiExtends,feiClass 四個文件

index.vue

<template>
    <div id="index">
        <div>{{foo}}</div>
        
        <div>{{bar}} ___ {{bar2}}</div>
        <div>{{hello}}</div>

        <div>{{daFei.setName("WEB")}} __賦值</div>
        <div>{{daFei}}</div>   <!--  { "name": "WEB", "age": 18 }  -->
        <div>{{daFei.name}}</div> <!--   WEB  -->


        <!--
            01) extends是創建一個子類，最終返回一個vue實例。一般在單獨用js書寫組件的時候使用。
            
            02) 而mixins選項是指定要混入的代碼片段，vue代碼中的script部分。
            混入則可認為是vue版本的全局方法庫，而且不怎么影響現有vue邏輯的一個特殊處理方式。通常用
            在業務邏輯相似但又不同的兄弟組件之間
        -->
    </div>
</template>

<script>
    import {feiMixins, mixins2} from "./feiMixins.js" //  mixins
    import {feiExtends} from "./feiExtends.js" // extends
    import {feiClass} from "./feiClass.js"  // class
    
    export default {
        name: "index",
        components:{},
        mixins: [feiMixins,mixins2],
        extends: feiExtends,
        data() {
            return {
                foo: "foo_01",
                daFei: new feiClass()
            }
        }
    }
</script>

<style scoped>

</style>

feiMixins.js

export const feiMixins = {
    name: "xxx",
    data() {
        return {
            bar: "bar_mixins"
        }
    }
};

export const mixins2 = {
    name: "xxx",
    data() {
        return {
            bar2: "bar_002"
        }
    }
};

feiExtends.js

export const feiExtends = {
    name: "xxx",
    data() {
        return {
            hello: "hello_extends"
        }
    }
};

feiClass.js

export class feiClass {
    constructor() {
        this.name = "fei";
        this.age = 18;
    }

    setName(name) {
        this.name = name;
    }
}