Vue: 子が親に登録されたコンポーネントを「継承」できるようにします。

実際のユースケースはありますか？

小さなユースケースでは、すべてをグローバルに登録するだけです。 大規模なアプリでは、各コンポーネントが必要なものに明示的に依存する方がはるかに保守しやすくなります。 状況によっては役立つかもしれませんが、メリットにはグローバルなトレードオフが伴います。 1.0の背後にある考え方は、「何かがほんのわずかしか役に立たない場合、または保守性に悪影響を与える場合は、それを削除しましょう」というものです。

うん。 私のアプリケーションには、カスタムエディタ要素の複雑な構造を持つポップアップウィンドウがあります。 これらの要素は3〜4レベルの階層で組み合わせることができるため、親要素ごとに明示的に宣言するのは非効率的です（3〜5の親タイプ* 10の宣言された要素= 50行の繰り返しコード）。 また、アプリケーションの他の部分には表示されないため、グローバルに登録することもお勧めしません。 だから私はそれらを「ローカルに」ロードしてもらいたいです。

それらを明示的にインポートすることは、やりがいのある繰り返しです。 これにより、その階層内の任意のコンポーネントだけを調べて、その依存関係がどこから来ているのかを理解できます。 暗黙的なフォールバックを使用すると、3か月後に階層内のどこにこれらのコンポーネントをインポートしたかを思い出せなくなります。

@ yyx990803良い思い出があります、ありがとう。 したがって、私のアプリは2つの非常に異なる部分で構成されており、それぞれが固有の明確に定義されたコンポーネントのセットを登録していることを思い出します。 したがって、アセットをロードする場所を選択したいと思います（カスタムディレクティブとフィルターにも同じことが起こったと思います）。

私の印象を共有させてください。 私は0.12.xで作業しましたが、非常にうまくいきました（いくつかのマイナーな学習曲線を除いて）。 最小限でクリーンなAPI、構文、信頼性の高いコード。 現在、1.0.0ベータ版であり、悪化しましたが、良くはありません。 より多くのコードの繰り返し、私が使用する機能が削除され、同じコードを何度も書き直しました。 将来、重大な変更や時間の無駄がなくなるかどうかわからないため、ReactではなくVueを選択するのを間違えたと思い始めています。

@karevn

1. この問題に加えて、開発者のエクスペリエンスを悪化させた特定の事柄を実際にリストすると、はるかに役立ちます。
2. 1.0.0-alphaはプレリリースです。つまり、そもそもAPIの安定性は保証されていませんでした。 安定性を重視する場合は、0.12に固執し、安定した1.0（最終的な移行リリースもあります）を待つ必要があります。 プレリリースを使用するということは、絶え間ない重大な変更に対処することに同意したことを意味します。
3. 1.0.0-ベータ版もリリースされていません。 リリースされていない進行中のブランチを使用することは、おそらく良い考えではありません。
4. 私は自分の経験とコミュニティ全体からのフィードバックに基づいてAPIを設計しています。 あなたはあなたが考えるものは何でも受ける権利があり、変更があなたが望む方向にない場合は他のフレームワークに自由に切り替えることができます。 （実際、Reactでは、すべてを明示的にインポートする必要があり、さらに多くのことを繰り返す必要があります。）

1. ディスカッション＃1170を読んだ後、私は今ほとんど同意しています。 しかし.. strict: trueをデフォルトにするのではなく、この機能を提供する既存のコードを削除しても意味がありません。 好みは異なり、一部の人々は「フォールバック」アプローチを好むでしょう。これは時々より直感的です。 特に、コンポーネントが動的にロードされる場合。 ミックスインやファクトリーなどで回避できますが、すべて貴重な時間がかかります。
2. 確実なこと。 しかし、「理想的なアーキテクチャ」と変更のコストの間には常にバランスがあります。 この場合、数行のコード（つまり、約10行）が残っていても、だれも傷つけることはありません。かなりの時間がかかりました。 そして、この不安定なバージョンを使用する必要があります。これは、「読み取り/書き込みバインディングフィルター」機能が本当に必要なためです。これらの機能はおそらく0.12.xにバックポートされません。
3. 2を参照してください。
4. 問題は「どのAPIを好むか」ではありません。 私はVueが好きです。 限目。 問題は、「VueAPIを長期的に信頼できるかどうか」です。 ハンサムさよりも信頼性。 変更が壊れている場合は、重大な理由があるはずです。 私のコードのすべてを壊した新しいバインディング構文の場合-わかりました、そうしましょう、それはより読みやすく、より良いコード構造を強制します。 この場合-いいえ。 この変更は、デフォルトでoptions.strict = trueが設定されているため、中断しない可能性があります。

はい、アップグレードには常にリファクタリングの苦痛が伴いますが、Vueがこれらのレガシー構成オプションから解放される唯一のチャンスは1.0です。 1.0以降は厳密にsemverになり、2.0まで壊れることはありません。 そして、あなたが話した信頼性の問題のために、1.xをできるだけ長く持続させたいと思います。

厳密なモードに関して：あなたがそれに大きく依存しているとき、それは確かにリファクタリング時間を要します-しかし理想的には1.0以降のVueを手に入れる新しいユーザーにとって、彼らはこのことが存在することさえ知る必要はありません。 APIサーフェスは可能な限り小さくする必要があり、グローバルな構造化パターンは可能な限り一貫している必要があります。 厳密モードを無効にできるようにすることで、基本的に2つの異なるスタイルのVueアプリの構造化が促進されます- strict: trueを使用する1つのアプリで作業し、 strict: falseを使用する別のプロジェクトに移動することを想像してください...開発者の経験の断片化、そして私はその可能性を取り除きたいと思っています、そして1.0はそれをするための唯一の合理的な場所です。

この移行の途中であなたが捕まるのはちょっと不幸です、そして私はあなたのフィードバックに感謝します。 しかし、やらなければならないことはやらなければなりません。

@ yyx990803私はちょっと立ち往生している具体的なユースケースを見ることができます。

私がやろうとしていること

私は拡張可能なアプリケーションを構築します：ウィジェットで拡張可能です。 ウィジェットは、開発者が定義したアプリケーションの一部であり、グローバルアプリケーションをプラグインして、ある時点で拡張します。 アプリケーションの起動時に動的にロードされます。 アプリケーションの各インスタンスは異なるウィジェットのセットを持つことができ、アプリケーションの2つのインスタンスは同じページに存在できます。

ロードされると、ウィジェットは動的に作成されたコンポーネントをvuejsアプリケーションに追加します。
ウィジェットには他のウィジェット（子）を含めることができます。この部分はアプリケーションのロード後にユーザーによって管理されるため、起動時にどのようになるかはわかりません。 そのため、ウィジェットはお互いを認識し、他のウィジェットを登録する必要があります。

問題

これらのウィジェットをグローバルに登録することは避けたい（互換性の理由）。
コンポーネントは動的に構築およびロードされるため、子を含むことができる各コンポーネントにすべてのコンポーネントを登録する必要があります。 これは、使用されない可能性のある多くの登録を行います。 私が何を意味するかを見てください（今のところ、コンポーネントのローカル登録を試みておらず、グローバル登録でテストを行っていることに注意してください）：

var components = {

    appComponents: {
       template: "...",
       components: components
    },

    appComponents2: {
       template: "...",
       components: components
    },

    widgetComponents: {
       template: "...",
       components: components
    },

    widgetComponents2: {
       template: "...",
       components: components
    },

}

これを行うときにパフォーマンスのボトルネックはありますか？

そのため、「セミグローバル」コンポーネントのスコープが役立つと思います。 ルートコンポーネントと子コンポーネントからコンポーネントに到達できる、コンポーネントの範囲を閉じたアプリケーションを構築すると役立つ場合があります。 しかし、他のvuejsのルーツからではありません。 どう思いますか？

グローバル登録は再帰的に登録されるのではなく、
コンポーネント自体であり、その中のコンポーネントではありません。 componentsオプションです。 だから私は推測します
問題はありませんでした。

2016年8月22日月曜日、16：00 [email protected]は次のように書いています。

@ yyx990803https ：//github.com/yyx990803具体的なユースケースを見ることができます
私はちょっと立ち往生しています。

_私がやろうとしていること_

私は拡張可能なアプリケーションを構築します：ウィジェットで拡張可能です。 ウィジェットは
アプリケーションの開発者定義の部分、それは動的にロードされます
アプリケーションの起動。 アプリケーションの各インスタンスは
ウィジェットの異なるセット。

ロードされると、ウィジェットは動的に作成されたコンポーネントをに追加します
vuejsアプリケーション。
ウィジェットには他のウィジェット（子）を含めることができますが、それがどのように行われるかはわかりません。
この部分はユーザーによって管理されるため、起動時になります
アプリケーションがロードされます。 そのため、ウィジェットはお互いを認識する必要があります。

_問題_

これらのウィジェットをグローバルに登録することは避けたいです。
ウィジェットは動的に読み込まれるため、すべてのウィジェットをに登録する必要があります
子を含めることができる各ウィジェット。 それはそれを登録する多くのことをします
使用されない場合があります。 見る：

var components = {

appComponents: {
   template: "...",
   components: components
},

appComponents2: {
   template: "...",
   components: components
},

}

_これを行うときにパフォーマンスのボトルネックはありますか？_

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/vuejs/vue/issues/1297#issuecomment -241339596、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AFTLl6QDePtH93VOU2lgrC72Z0vKLsv-ks5qiVcXgaJpZM4F7M1v
。

@fnlctrlグローバル登録ではありません。

問題はそれです

• すべてのvue + componentインスタンスのグローバル登録レジスタ。
• 現在のコンポーネントのみのローカル登録レジスタ
• ルートと子の「セミグローバル」に登録する方法はありません。現在のvueインスタンス（このインスタンスに追加されたコンポーネントも含む）に登録できるものです。

私の意見では、問題はvueが静的（グローバル）な方法であるということですが、パッケージ化/配布可能な（ローカル）方法では制限されています。

Vueにはプロトタイプの継承があるため、 semi-globalの登録は実際にはすでに可能です。
https://jsfiddle.net/fnlCtrl/32dt9e9g/

@fnlctrl
送信したフィドルで何を表示したいかわかりません（例にエラーがあることに注意してください： Unknown custom element: <bar> - did you register the component correctly? ）。

私は十分に明確ではありません、多分あなたは私が説明したいことを理解していませんでした。 もう一度やりましょう：

私が説明したいのは、次のことができるということです。

• コンポーネントをVue.component('name', {...})グローバルに登録します（これはシングルページアプリに最適です）
• コンポーネントをコンポーネントnew Vue({ components: {...} });ローカルに登録します（ローカルで再利用できるように依存関係のあるコンポーネントを出荷するのに適しています）

ただし、親から子までコンポーネントを利用できるようにすることはできません。 現在のvmインスタンスとこのインスタンスにロードされたすべてのコンポーネントのコンポーネントをグローバルに登録するようなものですが、他のvmインスタンスにロードされたコンポーネントには登録しません。 例を参照してください： https ：

わかりますか？

おっと、私のフィドルが正しく保存されなかったようです。
これは私があなたに見せようとしたものです。
https://jsfiddle.net/fnlCtrl/32dt9e9g/1/

私は今あなたの例を読んでいます。

ここで、動作するように修正された例をフォークしました。正しく理解したことを願っています。
Foo内に制限された動的コンポーネントを追加したい。

@fnlctrlあなたの例に感謝しますが、それは私がまだ達成しようとしていることをカバーしていないようです。

この例でメソッドを使用すると、コンポーネントはFooにのみ登録されますが、 Fooの子（この例ではBar ）でコンポーネントを使用できるようにはなりません。

フィドルを参照してください。 BazをFooに登録し、 Fooから読み込まれるため、 Barで利用できるようにしたいと思います： https：// jsfiddle .net / 8y0Lmb01 / 3 /

あなたの例をフォークしました： https ：//jsfiddle.net/fnlCtrl/uvzaotaz/

重要なのは、コンポーネントには明確な依存関係ツリーが必要であり、相互に依存する動的コンポーネントも例外ではないということです。

@fnlctrlあなたの例では、 BazはFooでは使用できなくなりました。

そうするためにVue.component('baz', {...}を使用できますが、問題は、このbazコンポーネントで他のvueインスタンスを「汚染」することです。

また

FooとBarの両方、およびすべてのfooの子、すべてのbarの子、すべてのFoo Grand ChildrenなどにBazを登録できます...しかし、これにより、大規模/動的なアプリの場合は非常に複雑です

意味がわかりますか？ ローカルで登録することはできますが、現在のコンポーネントの子、孫、...のコンポーネントを継承することはできません_only_

はい、私は今あなたの主張を理解しています。 登録していることに気づかなかったのでごめんなさい
Fooの下のコンポーネントは、Fooのスコープ内でグローバルになりません。
Vue.component。 ソースを調べて理由を確認します。

2016年8月22日月曜日、20：17 [email protected]は次のように書いています。

@fnlctrl https://github.com/fnlctrlあなたの例では、Bazは利用できません
もうフーで。

これを行うには、Vue.component（ 'baz'、{...}を使用できますが、問題は
このbazコンポーネントで他のvueインスタンスを「汚染」します。

また

私はBazをFooとBarの両方、およびすべてのfooの子に登録できました。
すべてのバーの子供、すべてのFoo Grand Childrenなど...しかし、それは多くのことを追加します
大規模/動的アプリの場合の複雑さ

意味がわかりますか？ ローカルで登録できますが、継承できません
現在のコンポーネントの子供、孫、...のためのコンポーネント
_それだけ_

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/vuejs/vue/issues/1297#issuecomment -241395119、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AFTLl2ud0GDO_hOwFN8GIA1TzVEF1q0Fks5qiZM9gaJpZM4F7M1v
。

ありがとう ：）

重要なのは、vueに依存するスタンドアロンライブラリを出荷したいということです。とにかく、スタンドアロンライブラリとして、グローバルVueインスタンスにコンポーネントを登録することは許可されていないため、特定のインスタンスのコンポーネントを登録することは大きなメリットになります（それはスタンドアロン部分を壊すでしょう）。

私が話していたことがVueに実装されている可能性があるかどうか教えてください

理由は私が見落としているほど明白だったと思います：私はそうではありませんでした
new Foo()を使用して..。

私の家に帰るとき、20分でフィドルを取得します。

2016年8月22日月曜日、20：27宋铄运[email protected]は次のように書いています。

はい、私は今あなたの主張を理解しています。 登録していることに気づかなかったのでごめんなさい
Fooの下のコンポーネントは、Fooのスコープ内でグローバルになりません。
Vue.component。 ソースを調べて理由を確認します。

2016年8月22日月曜日、20：17 Soufiane [email protected]
書きました：

@fnlctrl https://github.com/fnlctrlあなたの例では、Bazはそうではありません
Fooで利用可能になりました。

これを行うには、Vue.component（ 'baz'、{...}を使用できますが、問題は
このbazコンポーネントで他のvueインスタンスを「汚染」します。

また

私はBazをFooとBarの両方、およびすべてのfooの子に登録できました。
すべてのバーの子供、すべてのFoo Grand Childrenなど...しかし、それは多くのことを追加します
大規模/動的アプリの場合の複雑さ

意味がわかりますか？ ローカルで登録できますが、継承できません
現在のコンポーネントの子供、孫、...のためのコンポーネント
_それだけ_

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/vuejs/vue/issues/1297#issuecomment -241395119、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AFTLl2ud0GDO_hOwFN8GIA1TzVEF1q0Fks5qiZM9gaJpZM4F7M1v
。

ええと、 new Foo(...)もうまくいきませんでした： https ：//jsfiddle.net/8y0Lmb01/5/

確かに奇妙な... https：//jsfiddle.net/fnlCtrl/p0ggkncu/
今それを調べています。

ソースコードをいくつか読んだところ、Vue自体で次のようにハッキングできることがわかりました。
https://jsfiddle.net/fnlCtrl/522aw9sm/
（Vue.extendまたはVue.componentを使用せずに、ところでVue.componentは、Vue.extendを実行し、Vue.options.componentsを変更するヘルパー関数にすぎません）

同じアプローチは拡張Vueでは機能しませんが：
https://jsfiddle.net/fnlCtrl/v1m2s16u/

したがって、問題はコンポーネントの解決が原因であると思います。 探し続けます。

@fnlctrlわかりました、ありがとう

resolveAssetについてのこれらのコメントだと思います

アセットを解決します。
この関数は、子インスタンスがアクセスする必要があるために使用されます
その祖先チェーンで定義されたアセットに。

拡張Vueへのコンポーネントの登録が機能することになっていることを示唆しています。

関数本体のコードは祖先チェーンを見ていませんよね？ 多分それはまだ実装されていませんか？

私はまだ十分に知りませんが、まだその振る舞いを学んでいますが、「祖先チェーン」は最初のパラメーターoptionsを指していると思います。

原因はこれ（src / core / global-api / extend）であると結論付けることができると思います。
これにより、拡張クラスは親と同じメソッドを使用します。

私はそれをテストしました、あなたがコア/グローバルAPI /アセットにあるものをコピーするなら（もちろん、タイプが取り除かれたdistバージョン内の対応するコードを使用してください）
vue.extendに、次のように表示します（ VueをSubに変更します）：

config._assetTypes.forEach(function (type) {
        Sub[type] = function (id, definition) {
          if (!definition) {
            return this.options[type + 's'][id];
          } else {
            /* istanbul ignore if */
            if ("development" !== 'production') {
              if (type === 'component' && config.isReservedTag(id)) {
                warn('Do not use built-in or reserved HTML elements as component ' + 'id: ' + id);
              }
            }
            if (type === 'component' && isPlainObject(definition)) {
              definition.name = definition.name || id;
              definition = Sub.extend(definition);
            }
            if (type === 'directive' && typeof definition === 'function') {
              definition = { bind: definition, update: definition };
            }
            this.options[type + 's'][id] = definition;
            return definition;
          }
        };
      });

Foo = Vue.extend()とFoo.component()が機能します。

これはパフォーマンスの低下を引き起こすと思いますが。

@gsoufそして私はパズルの最後のピースを見つけたと思います（vueを変更しない同等の回避策）：
https://jsfiddle.net/fnlCtrl/v1m2s16u/

var Root = Vue.extend()

Root.options.components.Foo = Root.extend({
    template: '<div>Foo</div>'
})

Root.options.components.Bar = Root.extend({
    template: '<div>Bar, uses <foo></foo></div>'
})

new Root({
    template: `
  <div>
    <foo></foo>
    <bar></bar>
  </div>
  `
}).$mount('#app')

こんにちは@fnlctrl 、出力に感謝し、遅れて申し訳ありません。

実際、コンポーネントは、親からではなく、コンストラクタからコンポーネントを継承しているように見えます。 現在、ユースケースにパッチを適用できるかどうかを検討しています。

あなたの場合、それはインスタンスではなくコンストラクターにアタッチされたままです、私はそれがインスタンスの一部であるだけであることを探しています

@fnlctrlは、javascriptの動作方法と、例のおかげで、作成するインスタンスごとにvueを「動的に拡張」して、このアプリケーションでのみすべてを利用できるようにすることで回避できます。

createVueInstance = function(el, data){
    var vExtend = Vue.extend();
    vExtend.partial('some-semiglobal-partial', "...");
    vExtend.component('some-semiglobal-component', vExtend.extend({...}));

    return new vExtend({
        el: el,
        data: data
    });
};

コアがどのように構築されたかを確認した後、インスタンスごとに利用可能なコンポーネントを簡単に統合できるように構築されたようには見えません。この回避策は私にとって十分に安定しています。

ご協力いただきありがとうございます！

ところで、あなたが私に見せた例は、ドキュメントで深く説明できると思います。 私はそれについての言及を見つけられませんでした

@gsoufどういたしまして。 同様の機能を実装したい人にとっては、この問題で十分だと思います：smile：

ここに「セミグローバル」のユースケースがあります。

私は比較的普遍的なレイアウトコンポーネントを持っていますが、コンテンツはレイアウトコンポーネントを使用するコンポーネントによって構成できます。 コンポーネントAはレイアウトを使用し、そのコンテンツをコンポーネントBで構成したい場合、他の一部のコンポーネントはレイアウトを使用し、そのコンテンツをコンポーネントCで構成する場合があります。

このパターンをサポートする必要がありますか？

または、このデザインを置き換えるソリューションはありますか？

このパターンは、コードの再利用を改善するためにiOSで広く使用されており、これは柔軟な設計です。

@hpsoarおそらく必要なのはスロットです

私のデザインは次のとおりです。基本的に、これにより、セルで2つのことができるようになります。

1. セルをcssスタイルで構成するだけで、多くの場合に十分です。
2. 特別な場合に使用されるコンポーネントをセルに挿入します。

<template>
  <div class="tile is-ancestor">
    <div class="tile is-parent">
      <article class="tile is-child box">
        <div class="table-responsive">
          <table class="table is-bordered is-striped is-narrow">
            <thead>
            <tr>
              <th v-for="c in columns">
                {{c.title}}
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in items">
              <template v-for="c in columns">
                <td v-if="c.hasOwnProperty('component')"><div :is="c.component"></div></td>
                <td v-else>{{ item[c.name] }}</td>
              </template>
            </tr>
            </tbody>
          </table>
        </div>
      </article>
    </div>
  </div>
</template>

<script>

export default {
  components: {
  },
  props: [
    'columns',
    'items'
  ],
  data: function () {
    return {
    }
  }
}

</script>

<style lang="scss" rel="stylesheet/scss">
  .table-responsive {
    display: block;
    width: 100%;
    min-height: .01%;
    overflow-x: auto;
  }
</style>