PHP で VueJS コンポーネントを活用する

Question

最下位の dom リーフに至るまで VueJS を使用せずに、Php と VueJS コンポーネントによって生成された基本的な HTML を混合したいと考えています。

親レイアウトには Vue アプリケーションが適用されており、すべてのヘッダー、ナビゲーション、サイドバーなどは Vue コンポーネントであり、ほとんどのページのメイン コンテンツは依然として PHP によって生成された純粋な HTML です。

メイン コンテンツの一部を Vue コンポーネントでアップグレードしたいのですが、HTML を使用すると使用できなくなります:

リーリー

# 上部の DOM では正常に動作しますが、基本的な HTML をレンダリングした後、アプリケーションは下のコンポーネントにデータを入力しなくなります。

Php はスクリプト タグで JS をレンダリングできますが、インポートは使用できません。

ページのどこに記述されていても、Vue インスタンスですべての タグを Cats コンポーネントとして扱う方法はありますか?

これまでに試したこと:

• 非同期コンポーネント。
• ポータルをインストールするポータルを使用します。
• 別の Vue インスタンスを作成し、別の ID にマウントします。

＃＃＃何か案は？

編集: 私が引き継いだこの巨大企業では、複数の UI 近代化の試みがごちゃ混ぜに行われていたため、妨げられた可能性のあることを以前にも試みました。 したがって、この状況に直面している他の人たちの可能性も排除しません。

Answer 1

API またはその他のソースからテンプレートを Vue インスタンスに動的に渡す場合。 v-html 属性を介してこのプロパティにアクセスする方法がありますが、使用する前に以下のコメントを確認してください。

コンテンツはプレーン HTML として挿入されることに注意してください。コンテンツは Vue テンプレートにコンパイルされません。

したがって、コンポーネント自体をバインド/レンダリングしようとすると、それは純粋な HTML ではなくなります。したがって、Vue のテンプレート コンパイラでは処理されません。

考えられる解決策は、HTML テンプレート全体ではなく、PHP API からコンポーネント名とプロパティを取得できることです。

Vue コンパイル オプションを使用しても同じことを実現できます。デモは次のとおりです :

リーリー リーリー

Answer 2

最後に、次のような設定関数を使用して、グローバル window.ExtraVue を含むビルド構成に JS ファイルを手動で追加する必要がありました。 リーリー

次に、PHP スクリプトの最後で設定関数を呼び出します。

リーリー

setup 関数は、独立させる必要があるコンポーネントごとに新しい Vue インスタンスを作成できるようになりました。

理想的には、VueJS が一致するタグをコンポーネントに置き換えることができれば素晴らしいと思います。