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

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

1 个答案: