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