VUE3 開発の基本: Vue.js テンプレートを使用して他のテンプレートを参照する

Vue.js 開発では、テンプレートを使用することが非常に一般的です。 1 つのテンプレート内で別のテンプレートを参照する必要がある場合はどうすればよいでしょうか?この記事では、Vue.js テンプレートを使用して他のテンプレートを参照する方法を紹介します。

Vue.js では、d477f9ce7bf77f53fbcf36bec1b69b7a タグを使用してテンプレートを定義できます。テンプレート ファイルでは、それぞれに独自の名前を持つ複数のテンプレートを定義できます。テンプレート内で別のテンプレートを参照する必要がある場合、d477f9ce7bf77f53fbcf36bec1b69b7a タグの name 属性を使用して、参照する必要があるテンプレートの名前を指定するだけです。

header.vue と footer.vue という 2 つのテンプレート ファイルがあるとします。 header.vue ファイルは Web サイトのヘッド ナビゲーション バーを定義し、footer.vue ファイルは Web サイトの下部にある著作権情報を定義します。 Web サイトのメイン テンプレートでこれら 2 つのテンプレート ファイルを参照したいのですが、どうすればよいでしょうか?

まず、メイン テンプレート ファイルでこれら 2 つのテンプレート ファイルを参照する必要があります。これら 2 つのファイルは、import ステートメントを使用して導入できます。

<template>
  <div>
    <header></header>
    <router-view></router-view>
    <footer></footer>
  </div>
</template>

<script>
import Header from './header.vue'
import Footer from './footer.vue'

export default {
  name: 'MainTemplate',
  components: {
    Header,
    Footer
  }
}
</script>

上記のコードでは、import ステートメントを使用して header.vue ファイルと footer.vue ファイルを導入し、これら 2 つのコンポーネントをコンポーネント属性に登録します。このようにして、テンプレート内の 1aa9e5d373740b65a0cc8f0a02150c53 タグと c37f8231a37e88427e62669260f0074d タグを使用して、これら 2 つのコンポーネントを参照できます。

次に、header.vue ファイルと footer.vue ファイルでコンポーネントのテンプレートを定義します。

header.vue ファイルのコードは次のとおりです。

<template>
  <div>
    <h1>Header</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</template>

header.vue ファイルでは、タイトルと 3 つのナビゲーション リンクを含むヘッダー ナビゲーション バーを定義します。

footer.vue ファイル内のコードは次のとおりです。

<template>
  <div>
    <p>Copyright © 2021</p>
  </div>
</template>

footer.vue ファイルでは、著作権情報を定義します。

ここで、ページを更新して効果を確認します。すべてが正しく設定されている場合は、ヘッド ナビゲーション バー、メイン コンテンツ領域、下部に著作権情報を備えた Web サイトが表示されます。

概要

Vue.js 開発では、テンプレートを使用するのが一般的です。テンプレート内で別のテンプレートを参照する必要がある場合、d477f9ce7bf77f53fbcf36bec1b69b7a タグの name 属性を使用して、参照する必要があるテンプレートの名前を指定できます。メインのテンプレート ファイルでは、import ステートメントを使用して他のテンプレート ファイルを導入し、これらのコンポーネントをコンポーネント属性に登録できます。参照されたテンプレート ファイルで、独自のテンプレートを定義できます。

以上がVUE3 開発の基本: Vue.js テンプレートを使用して他のテンプレートを参照するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。