vue 单独js文件中创建类并在组件中引用

如标题所述的问题在百度上搜索竟大多是语焉不详，可能是问题太过低级大佬们都不屑一讲，那我只能自己记录一下了

1、vue项目中新建model.js文件

2、在model.js中定义Person类 和 返回实例的工厂函数

export default class Person {
    constructor(first,last) {
        this.firstName = first
        this.lastName = last
    }
}

export function createPerson(first, last) {
    return new Person(first, last)
}

3、在需要使用此类的组件中引入

<script>
    import {createPerson} from '../../common/domain/person.js' // 注意{} 引入的是类或方法
    var user = createPerson('zhang', 'san')
    export default {
        name:'base-layout',
        data: function() {
            return {
                user: user
            }
        }
    }
</script>

4、使用

<template>
    <div class="container">
        <header class="header">
            <slot name="header"></slot>
        </header>
        <main>
            <slot v-bind:user="user">{{user.firstName}}</slot>
            <!-- <slot>{{user.firstName}}</slot> -->
        </main>
        <footer class="footer">
            <slot name="footer"></slot>
        </footer>
    </div>
</template>