私はvue-loader( http://vuejs.github.io/vue-loader/start/spec.html )を使用して_*.vue
_単一ファイルコンポーネントを構築していますが、私は単一ファイルコンポーネントを別のコンポーネントから拡張するプロセスに問題がある。
1つのコンポーネントが_export default { [component "Foo" definition] }
_の仕様に従っている場合、このコンポーネントをインポートするだけで(子コンポーネントの場合と同じように)、export default Foo.extend({ [extended component definition] })
をインポートするだけの問題だと思います。
残念ながら、これは機能しません。誰でもアドバイスを提供できますか?
これを行う適切な方法は、ミックスインを使用することです。 http://vuejs.org/guide/mixins.html
ミックスインは、拡張可能な抽象コンポーネントと考えてください。そのため、両方に必要な機能を備えたミックスインを作成し、それを各コンポーネントに適用することができます。
いくつかのテストの後、単純な解決策は、拡張されるコンポーネントのプレーンオブジェクトではなく、Vue.extend()
オブジェクトをエクスポートすることでした。
私の場合、ベースコンポーネント:
import Vue from 'vue'
export default Vue.extend({ [component "Foo" definition] })
および拡張コンポーネント:
import Foo from './Foo'
export default Foo.extend({ [extended component definition] })
別の可能性はextends
オプションです:
import Foo from './Foo'
export default { extends: Foo }
Vueの「extends」機能は、Vueの名前があまりよくないメソッドだからといって避けたいと思います。継承の場合ではなく、実際には何も拡張しません。それがするのはまさにmixinが行うことで、2つのコンポーネントを一緒にマージします。テンプレートコードとは関係がなく、拡張もできません。 「extend」Vueメソッドは「merge」と呼ばれるべきでした。
とにかく、VueはDOMの階層で動作する必要があり、したがってDOMに構成されます。その同じ考え方がSFCの構築を支配するはずです。基本動作にコンポーネントミックスインを使用し、必要なコンポーネントをその動作に合わせて、最小の共通部分をより大きな部分にまとめながら、同時にテンプレートコードを最小限に抑えます。SFCを作成する際は、「薄いビュー、モデルを考える」必要があります。