Vue扩展了一个具有导入的类

Question

我已经在一个组件上定义了一个导入。然后我有另一个组件从它延伸出来。我将如何定义和访问父组件已导入的Service？

服务

export default {
    getSomeData() {
        return [1,2,3,4]
    }
}

父组件

import Service from '../service';

export default {
    data() {
        return {
            testData: 'test'
        }
    }
}

子组件

import Component from '../component';

export default {
    extends: Component,

    mounted() {
        console.log(Service.getSomeData()); // [1,2,3,4] Doesn't work, Service not defined.
        console.log(this.testData); // 'test' Works
    }
}

通常我会在子组件中导入Service 并使用该函数。如何在父级中定义它，以便我可以在子级中访问它而无需再次为其他子级导入它？我宁愿不把它做成一个 Vue 组件并扩展它。

谢谢

Answer 1

您可以将其分配给数据属性：

import Service from '../service';

export default {
    data() {
        return {
            testData: 'test',
            service: Service
        }
    }
}

import Component from '../component';

export default {
    extends: Component,

    mounted() {
        console.log(this.service.getSomeData()); // [1,2,3,4]
        console.log(this.testData); // 'test' Works
    }
}