問題タブ [vue-component]

VueJS チュートリアルを読みましたが、まだ解決策が思いつきません。

リストのリストがあり、それらをアコーディオン (vue-strap のコンポーネントであり、以前に数回正常に動作することがテストされています) を使用して表示したいと考えています。

したがって、次のようなリストがあります。

次の視覚化が期待されます。

リスト 1:

• エル1
• エル2
• エル3

リスト 2:

• エル1
• エル2

リスト 3:

• もう一つ

しかし、VueJS はこのコンポーネントをレンダリングしていません...!

コードは次のとおりです。

このトピックに適切な名前を付ける方法はわかりません
が、アイデアは次のとおりです。親クラスに応じて、コンポーネントに異なる色を表示したい。このプロジェクトでは、webpack、vue、vue-loader、sass を使用します。

私はsassファイルを持っています。このファイルには、ページのすべての設定が含まれており、特定のページにどの色を使用する必要がありますか

コンポーネントが vue コンポーネントとして記述されています

問題は、多くのコンポーネントがあり、色ファイルを一貫してサポートすることが非常に難しいことです。新しいコンポーネントを追加したり、古いコンポーネントを削除したりするときは、常にこのファイルに移動して編集する必要があり、面倒です

したがって、解決策はメインファイルを作成することです。

次のスタイルでコンポーネントを書きたい

このコードは生成する必要があります

それで全部です。提案をありがとう

フィルターから変数を取得し、これが変更されたときにフィルターを更新することは可能ですか? 計算されたプロパティのように？

私は次のようなことができるようになりたいと思っています:

変更時にフィルターにテンプレートを再コンパイルさせthis.currentLanguageます。

明らかに、追加のパラメーターを渡すことができますが、文字列ごとにこれを行う必要はありません。

私のコードはコンポーネントを切り替えるときに機能しますが、代わりに再コンパイルを強制する方法はありますか? を使ってvue-routerいますが、

残念ながら、再コンパイルはトリガーされません。

Vue には、ウィンドウ サイズに合わせてスケーリングされたフレームであるコンポーネントがあり、フレームに合わせてスケーリングされ、その要素のパンとズームを有効に <slot>する要素 (通常は<img>または) が含まれています。<canvas>

コンポーネントは、要素が変更されたときに反応する必要があります。<slot>これを実行する唯一の方法は、親がコンポーネントをプロデュースすることですが、要素が変更されたときにコンポーネントが自動的に検出し、それに応じて反応できるようになれば、はるかに優れたものになります。これを行う方法はありますか？

vue.js の共通コンポーネントが異なる親コンポーネントと通信する場合のベスト プラクティスについて質問があります。

たとえば、私のシナリオでは、基本的なモーダル コンポーネントが「close」メソッドをトリガーしますが、2 つの異なる親コンポーネントがあります。

私は2つの解決策を見つけました：

1. 親は追加のプロップを渡す必要があり、baisc コンポーネントは、イベントの名前がプロップ値であるイベントをトリガーするだけなので、アタッチされたリスナー親コンポーネントを呼び出すことができます

2. 基本的なモーダルでは、 this.$parent を使用して親コンポーネントのメソッドにアクセスするか、 this.$parent.trigger('xxx') を使用するだけで、親は何をすべきかを知ることができます

しかし、上記の両方ともあまり良くないと思います.最初のものは追加の小道具を渡す必要があるかもしれません. そして 2 番目は、よりハードコードされているように感じられるかもしれません。

では、この場合、より良い解決策はありますか?

コンポーネントを作成し、さまざまな「.vue」ファイルに保存し、elixir / gulp ともちろん browserify を使用してコンパイルしました。

すべてのコンポーネントを 1 つの js ファイルに含めています。

アプリのすべてのコンポーネントを含むすべてのページで毎回呼び出される「build.js」ファイルのサイズを小さくする方法を知りたいです。

必要な場合にのみコンポーネントを含める方法を知っておくと役に立ちます。

この質問は Vue-router とは関係ありません

vue.js は初めてです

フロントエンドとして Vuejs を利用した中規模のプロジェクトに取り組んでいます。多くのコンポーネントで使用される可能性のある一般的なメソッドをカプセル化/分離するために私が検討しているオプションには、ミックスイン アプローチとプラグイン アプローチが含まれます。
Mixin アプローチ
mixin メソッドを使用する各コンポーネント (ファイル) に import ステートメントを記述する必要があります。ミックスインが複数の場所にインポートされるため、最終的なファイル サイズは増加しますか? thismixinメソッド内で 使用できます。

プラグイン アプローチ
プラグインをグローバルにインストールしVue.use(MyPlugin)、各コンポーネントにプラグインをインポートすることなく、任意のコンポーネントでプラグインを使用できます。
欠点:this[field]プラグイン メソッド内で使用できません。vmこのようなメソッドを使用する には、呼び出し元コンポーネントのインスタンスを渡す必要があります。

編集 1 - Extend Approach を含めるには Extend Approach
他
の複数のコンポーネントで使用されるすべてのメソッドを含む基本コンポーネントを定義し、この BaseComponent を拡張して新しいコンポーネントを作成できます。ここでも、継承コンポーネントのインスタンスを渡す必要があります。BaseComponent で使用される this は、呼び出し/継承コンポーネントを参照しません。

私が以下で使用しているものと同様のコードの簡単な例を見つけてください。

私の質問:

1. すべてのコンポーネント (メソッドが必要) に mixin ファイルをインポートするのは効率的な方法ですか?
   複数の場所 (コンポーネント ファイル) で mixin をインポートすると、mixin ファイルのコードが繰り返し含まれ、ファイル サイズが大きくなりますか?

2. 呼び出し元コンポーネントのインスタンスをvm = thisパラメーターとして渡す - 良い方法ですか? コンポーネント インスタンスをメソッド パラメータとして渡すと、効率の問題が発生しますか?

3. プラグイン/BaseComponent ではなく、呼び出し/継承コンポーネント インスタンスを参照する this (instance of the calling/inheriting component)ように、プラグインおよび/または BaseComponent 内のメソッドにバインドする方法は?this

4. パフォーマンス、DRYness、ファイルサイズに関して最も効果的なアプローチはどれですか?

私は vue.js と vue-qrcode を使用しています。ユーザー データを localStorage に保存し、正しく取得します。

機能するテンプレートに文字列を入れてみましたが、QRの形式がどういうわけか間違っています。変数を削除して data() val モデルでテキストのみを使用すると、QR は完璧になり、機能します。ただし、上記のコンテンツ モデルから 4 つの値を取得する必要があります。

VueJS で 1 つのコンポーネントを別のコンポーネント内に作成する方法を理解しようとしています。たとえば、次のようなものですが、残念ながら機能しません (子コンポーネントは何もしないように見えます)。

http://www.webpackbin.com/NyI0PzaL-

上記の .vue ファイル拡張子メソッドを使用するのと同じように、インライン テンプレートを使用してこれを行うことにも同様に関心があります。

上記の動作しない例のコードは次のとおりです。

main.js

index.html

App.vue

Child.vue

上記の例は webpackbin.com でホストされていますが、これを使用したい 2 つのプロジェクトでは、一方のプロジェクトで Laravel を使用し、もう一方のプロジェクトで Laravel Spark を使用しています。プレーンな Laravel アプリでは主に .vue ファイルを使用し、Laravel Spark アプリでは主にインライン テンプレートを使用しています。実用的なサンプルに特に感謝します。ありがとう！

アップデート

以下の回答をくれた Linus に感謝します。main.jsファイルで子コンポーネントをグローバルに登録するには、次の変更が必要なようです。

または、子コンポーネントを親内で使用できるようにローカルに保つために、次のように親コンポーネント ( App.vue ) を変更できます。