1. Vue.js JSSサンプル・アプリケーションの概要

JSS Vue.jsサンプル アプリのUIコンポーネント

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

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

JSS Vueサンプル アプリケーションでは、主にプレゼンテーション コンポーネントにSFC (Single-File Components) を使用しますが、レンダリング関数、インライン テンプレート プロパティなど、Vue.jsでサポートされている任意のコンポーネント宣言および登録方法を使用できます。

Vue.jsアプリケーションのJSSのコンポーネントは、ステートレスな機能コンポーネントであり、アンビエントフィールドプロパティを提供するプレースホルダコンポーネント内に動的に追加されるという点で、通常のVue.jsコンポーネントとは異なります。

以下は、JSSアプリケーションでのVueコンポーネント定義の例です。

<template>
  <div>
    <sc-text :field="fields.title" />
  </div>
</template>

<script>
import { Text } from '@sitecore-jss/sitecore-jss-vue';
export default {
name: 'MyComponent',
props: {
fields: {
type: Object,
},
},
components: {
ScText: Text,
},
};
</script>

Sitecoreフィールドのレンダリングを支援するために、Vue.jsのSitecore JavaScriptレンダリングSDK (JSS) には フィールド ヘルパー コンポーネントが用意されています。

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