Vue3 単一ファイルコンポーネント (SFC) の作成

Vue の単一ファイルコンポーネント（すなわち*.vueファイル、英語では Single-File Component、略称 SFC）は、Vue コンポーネントのテンプレート、ロジック、スタイルを単一のファイルにカプセル化できる特別なファイル形式です。

Vue3 では、あなたは.vueファイルを使用して単一ファイルコンポーネント（Single File Components, SFCs）を作成できます。このファイルには、コンポーネントのテンプレート、JavaScript コード、CSS スタイルが含まれます。

さて、私たちは削除します、npm init vue@latestコマンドで作成されたサンプルプロジェクト内のすべてのコンテンツ（Vue3 インストールを参照）。Vue で独自の簡単な Web ページを作成するためです。

コードを書き始める前に、<template>、<script>、<style> タグ内のすべてのコンテンツと、setup や scoped などの属性を削除してください。

あなたの App.vue ファイルは次のようになっているはずです：

App.vue ファイル：

<script></script>

<template></template>

<style></style>

同時に、私たちはまずsrcディレクトリ内のフォルダを空にしておくことができます。assetsとcomponentsその中のファイルは後から自分で追加・補足できます。

main.js ファイルのコードを次のように変更します：

main.js ファイルのコード：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

これでシンプルなプロジェクトが作成できました。App.vue ファイルに次のコードを記述します：

App.vue ファイルのコード：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, サンプル!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
</style>

上記の例では、1つの見出しを含むシンプルなコンポーネントを定義しています。コンポーネントのテンプレートには <h1> 要素が含まれており、Vue3 のテンプレート構文を使用して message プロパティをこの要素のテキストコンテンツにバインドしています。

JavaScript 部分には data 関数が含まれており、message プロパティを含むオブジェクトを返しています。このプロパティをテンプレートにバインドしています。

最後に、CSS スタイルで見出しの色を青に定義しています。

コンポーネントの JavaScript 部分では、新しい export default 構文を使用しています。この構文を使用すると、コンポーネント定義をデフォルトオブジェクトとしてエクスポートできます。Vue3 では、この構文を使用してコンポーネントを定義でき、Vue2 のように Vue.component 関数を使用する必要はありません。

アクセスhttp://localhost:5173/すると、上記のコードの実行結果は次のようになります：

コンポーネントの使用

コンポーネントを定義した後、他のコンポーネントでこのコンポーネントを使用できます。

コンポーネントを使用するには、まずコンポーネントを作成する必要があります。例えば、次の例では、./src/components/ディレクトリ内にHelloサンプル.vueコンポーネントファイルを作成します。コードは次のとおりです：

./src/components/Helloサンプル.vue ファイルのコード：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, サンプル!'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
</style>

次に、./src/main.js ファイルでこのコンポーネントをインポートして定義します：

./src/main.js ファイルのコード：

import { createApp } from 'vue'

import App from './App.vue'
import Helloサンプル from './components/Helloサンプル.vue'

const app = createApp(App)
app.component('hello-サンプル', Helloサンプル) // カスタムタグ
app.mount('#app')

親コンポーネントのテンプレートでは、カスタムタグを使用して子コンポーネントを組み込むことができます。以下の App.vue ファイルのコードのようになります：

App.vue ファイルのコード

<template>
  <div>
    <hello-サンプル></hello-サンプル>
  </div>
</template>

アクセスhttp://localhost:5173/すると、上記のコードの実行結果は次のようになります：

その他の拡張