1. 例

外部コンポーネントと Vue.js の統合

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

外部コンポーネントの柔軟性により、サードパーティの UI ライブラリとの統合が可能です。

次の例では、Vue.js フレームワークを使用して、アセットに関する情報を外部コンポーネントで表示しています。

[設定] タブ

[!警告] シームレスな統合のために、スクリプトをローカルに開発し、[コード] タブでバンドル ファイルを使用して外部コンポーネントを読み込むことをお勧めします。 この例では、[リソース] を空欄のままにしています。

  • [コントロール名]: コントロールはページ上で一意である必要があります。ここでは、Custom.Controls.MyCustomControl を使用します。

  • [設定]: この例では、追加のパラメーターは必要ありません。

  • [リソース]: この例ではバンドル ファイルを使用するため、ライブラリを追加する必要はありません。

[コード] タブ

このコードは、シンプルな Vue.js コンポーネントの初期化を示したものです。 インスタンスは、entityLoaded イベントをサブスクライブします。 エンティティが読み込まれると、必要な情報がコンポーネントにマッピングされます。 保存されたすべてのエンティティでは、entitySaved イベントにより情報の更新がトリガーされます。

この例では、コードはローカルで開発されており、次のバンドル ファイルを使用して読み込んでいます。

$.getScript("https://sldemosites.blob.core.windows.net/vue/dist/js/chunk-vendors.468a5298.js");
$.getScript("https://sldemosites.blob.core.windows.net/vue/dist/js/app.75ac5d70.js");

[テンプレート] タブ

外部コンポーネント コードには、次の HTML マークアップが必要です。

この記事を改善するための提案がある場合は、 お知らせください!