この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
ページ更新者:guest
更新日時:2019-08-23 02:25:19

タイトル: ヘッダー/フッターの共通コンポーネント
SEOタイトル: 【Vue.js】ヘッダー/フッターの共通コンポーネントの作り方

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<thead>
		<tr><th style="background-color:#f39c12;color:#ffffff;text-align:left">この記事の要点</th></tr>
	</thead>
	<tbody>
		<tr>
			<td style="background-color:#fef9e7">
			<ul>
				<li>Vue.js で<strong>ヘッダー / フッターの共通コンポーネント</strong>を作る方法</li>
				<li><code>Header.vue</code> / <code>Footer.vue</code> を作成 → <code>App.vue</code> の <code><template></code> で読み込む</li>
				<li>読み込みは <code><script>import Header from "./Header.vue"</script></code> + <code>components</code> 登録</li>
				<li>ページ毎に切替えたい部分は <strong><code><slot></code></strong> または <code><router-view></code> で差し込む</li>
			</ul>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

<h2>共通コンポーネントの作成</h2>

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
	<thead>
		<tr>
			<th scope="col" style="background-color:#ffffff">Header.vue</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff">&lt;template&gt;<br />
			&nbsp; &lt;header&gt;<br />
			&nbsp; &nbsp; &lt;h1&gt;Header&lt;/h1&gt;<br />
			&nbsp; &lt;/header&gt;<br />
			&lt;/template&gt;</span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>上記の様にヘッダーのような共通となりうるコンポーネントを作成する。<br />
&nbsp;</p>

<h2>共通コンポーネントの読み込み</h2>

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
	<thead>
		<tr>
			<th scope="col" style="background-color:#ffffff">App.vue</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff">&lt;template&gt;<br />
			&nbsp; &lt;div id=&quot;app&quot;&gt;<br />
			&nbsp; &nbsp; </span><span style="color:#f1c40f">&lt;Header/&gt;</span><br />
			<span style="color:#ffffff">&nbsp; &nbsp; &lt;router-view&gt;&lt;/router-view&gt;<br />
			&nbsp; &lt;/div&gt;<br />
			&lt;/template&gt;</span></p>

			<p><span style="color:#ffffff">&lt;script&gt;<br />
			import </span><span style="color:#f1c40f">Header</span><span style="color:#ffffff"> from &#39;./path/to/Header&#39;</span></p>

			<p><span style="color:#ffffff">export default {<br />
			&nbsp; components : {<br />
			&nbsp; &nbsp; </span><span style="color:#f1c40f">Header</span><br />
			<span style="color:#ffffff">&nbsp; }<br />
			}<br />
			&lt;/script&gt;</span><br />
			&nbsp;</p>
			</td>
		</tr>
	</tbody>
</table>

<p>App.vueといった#appを定義している大元のファイル等の適当な箇所に読み込ませたい共通コンポーネントを指定する。</p>

<p>&nbsp;</p>