最下位の dom リーフに至るまで VueJS を使用せずに、Php と VueJS コンポーネントによって生成された基本的な HTML を混合したいと考えています。
親レイアウトには Vue アプリケーションが適用されており、すべてのヘッダー、ナビゲーション、サイドバーなどは Vue コンポーネントであり、ほとんどのページのメイン コンテンツは依然として PHP によって生成された純粋な HTML です。
メイン コンテンツの一部を Vue コンポーネントでアップグレードしたいのですが、HTML を使用すると使用できなくなります:
リーリー
# 上部の DOM では正常に動作しますが、基本的な HTML をレンダリングした後、アプリケーションは下のコンポーネントにデータを入力しなくなります。
Php はスクリプト タグで JS をレンダリングできますが、インポートは使用できません。
ページのどこに記述されていても、Vue インスタンスですべての
タグを Cats
コンポーネントとして扱う方法はありますか?
これまでに試したこと:
編集: 私が引き継いだこの巨大企業では、複数の UI 近代化の試みがごちゃ混ぜに行われていたため、妨げられた可能性のあることを以前にも試みました。 したがって、この状況に直面している他の人たちの可能性も排除しません。
P粉8839734812023-11-11 17:48:32
API またはその他のソースからテンプレートを Vue インスタンスに動的に渡す場合。 v-html 属性を介してこのプロパティにアクセスする方法がありますが、使用する前に以下のコメントを確認してください。
コンテンツはプレーン HTML として挿入されることに注意してください。コンテンツは Vue テンプレートにコンパイルされません。
したがって、コンポーネント自体をバインド/レンダリングしようとすると、それは純粋な HTML ではなくなります。したがって、Vue のテンプレート コンパイラでは処理されません。
考えられる解決策は、HTML テンプレート全体ではなく、PHP API からコンポーネント名とプロパティを取得できることです。
Vue コンパイル オプションを使用しても同じことを実現できます。デモは次のとおりです :
P粉4941519412023-11-11 11:18:58
最後に、次のような設定関数を使用して、グローバル window.ExtraVue
を含むビルド構成に JS ファイルを手動で追加する必要がありました。
リーリー
リーリー
setup 関数は、独立させる必要があるコンポーネントごとに新しい Vue インスタンスを作成できるようになりました。理想的には、VueJS が一致するタグをコンポーネントに置き換えることができれば素晴らしいと思います。