Vue.js 開発では、テンプレートを使用することが非常に一般的です。 1 つのテンプレート内で別のテンプレートを参照する必要がある場合はどうすればよいでしょうか?この記事では、Vue.js テンプレートを使用して他のテンプレートを参照する方法を紹介します。
Vue.js では、 タグを使用してテンプレートを定義できます。テンプレート ファイルでは、それぞれに独自の名前を持つ複数のテンプレートを定義できます。テンプレート内で別のテンプレートを参照する必要がある場合、 タグの 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 つのコンポーネントをコンポーネント属性に登録します。このようにして、テンプレート内の
次に、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 開発では、テンプレートを使用するのが一般的です。テンプレート内で別のテンプレートを参照する必要がある場合、 タグの name 属性を使用して、参照する必要があるテンプレートの名前を指定できます。メインのテンプレート ファイルでは、import ステートメントを使用して他のテンプレート ファイルを導入し、これらのコンポーネントをコンポーネント属性に登録できます。参照されたテンプレート ファイルで、独自のテンプレートを定義できます。
以上がVUE3 開発の基本: Vue.js テンプレートを使用して他のテンプレートを参照するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
