web-dev-qa-db-ja.com

単一ファイルコンポーネントで別のVueJSコンポーネントを拡張するにはどうすればよいですか？ （ES6 vue-loader）

私は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] })をインポートするだけの問題だと思います。

残念ながら、これは機能しません。誰でもアドバイスを提供できますか？

javascriptecmascript-6vue.jses6-module-loader
27
Rhys

これを行う適切な方法は、ミックスインを使用することです。 http://vuejs.org/guide/mixins.html

ミックスインは、拡張可能な抽象コンポーネントと考えてください。そのため、両方に必要な機能を備えたミックスインを作成し、それを各コンポーネントに適用することができます。

17
Jeff

いくつかのテストの後、単純な解決策は、拡張されるコンポーネントのプレーンオブジェクトではなく、Vue.extend()オブジェクトをエクスポートすることでした。

私の場合、ベースコンポーネント：

import Vue from 'vue'

export default Vue.extend({ [component "Foo" definition] })

および拡張コンポーネント：

import Foo from './Foo'

export default Foo.extend({ [extended component definition] })
38
Rhys

別の可能性はextendsオプションです：

import Foo from './Foo'

export default { extends: Foo }
18
Chris Gaudreau

Vueの「extends」機能は、Vueの名前があまりよくないメソッドだからといって避けたいと思います。継承の場合ではなく、実際には何も拡張しません。それがするのはまさにmixinが行うことで、2つのコンポーネントを一緒にマージします。テンプレートコードとは関係がなく、拡張もできません。 「extend」Vueメソッドは「merge」と呼ばれるべきでした。

とにかく、VueはDOMの階層で動作する必要があり、したがってDOMに構成されます。その同じ考え方がSFCの構築を支配するはずです。基本動作にコンポーネントミックスインを使用し、必要なコンポーネントをその動作に合わせて、最小の共通部分をより大きな部分にまとめながら、同時にテンプレートコードを最小限に抑えます。SFCを作成する際は、「薄いビュー、モデルを考える」必要があります。

3
Skooppa.com