Vue 中mixins,extends,class简单使用

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;
    }
}