javascript - 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 并使用该功能。我如何在 parent 中定义它，以便我可以在 child 中访问它而不必为其他 child 再次导入它？我宁愿不把它变成一个 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
    }
}