Vue mixin(组件混入)的基本使用

自定义mixin：myMixin.js

const myMixin = {
    data() {
        return {
            message: 'hello',
            foo: 'abc'
        }
    },
    methods: {
        test () {
            console.log('test')
        }
    }
}

export default myMixin;

test.vue

<template>
    <div id="test">
        <button @click="test">点击一下</button>
    </div>
</template>

<script>
    import myMixin from "@/test/MyMixin.js";

    export default {
        name: 'Test',
        // 引入自定义mixin
        mixins: [myMixin],
        data() {
            return {
                message: 'hello',
            }
        },
        methods: {
            test () {
                console.log(this.message)
                console.log('test1234')
            }
        }
    }
</script>