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

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

Vue.js では、

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 つのコンポーネントをコンポーネント属性に登録します。このようにして、テンプレート内の

タグと

タグを使用して、これら 2 つのコンポーネントを参照できます。

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

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

<template>
  <div>
    <h1 id="Header">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 開発では、テンプレートを使用するのが一般的です。テンプレート内で別のテンプレートを参照する必要がある場合、

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