検索

ホームページ  >  に質問  >  本文

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

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

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

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

リーリー

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

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

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

これまでに試したこと:

###何か案は?

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

P粉611456309P粉611456309383日前898

全員に返信(2)返信します

  • P粉883973481

    P粉8839734812023-11-11 17:48:32

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

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

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

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

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

    リーリー リーリー

    返事
    0
  • P粉494151941

    P粉4941519412023-11-11 11:18:58

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

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

    リーリー

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

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

    返事
    0
  • キャンセル返事