vueでコンポーネントを作成する方方について紹介していきます。
今回の環境はnuxt.jsでの使い方になりますが、根本の考え方は変わらないので是非参考にしてみてください。
コンポーネントについて
コンポーネントは名前付きの再利用可能なインスタンスです。
簡単に言えば、部品、小さなテンプレートみたいな感じのイメージを持っていればいいかなと思います。
詳しくはvueの公式のドキュメントを見てみてください！
https://v3.ja.vuejs.org/guide/component-basics.html#基本例
コンポーネントを使うメリット
一番のメリットとも言えるのが修正が楽になることです。
例ですが、同じデザインのボタンを100個使ったとします。
このときに、テキストは「戻る」だったとしましょう。
仕様変更により「戻る」を「キャンセル」に変更して！となったときに、
htmlだと、100箇所修正しないと行けないが、コンポーネントで管理しているとコンポーネントのテキスト1箇所を変更するだけで、呼び出している部分のテキストすべてが変更されることになります。
これだけでも使うメリットはありますね。
vueのドキュメントは日本語なので、取っ付きやすいですね。
環境とバージョンについて
- mac OS 11.2.3
- エディタ VSCode
- node v14.8.0
- npm 6.14.7
コンポーネントの作り方
今回はヘッダーをコンポーネント化して行きます。
流れとしては、下記になります。
- ヘッダーコンポーネントの作成
- 呼び出し用のファイルの作成
私が実際に使っているデモサイトのヘッダーになるので、どんなデザインか気になる方は下記からチェックしてみてください！
ヘッダーコンポーネントの作成
全体のコードから確認していきましょう、これが一個のヘッダーコンポーネントです。
ファイル名はHeader.vueで保存します。
nuxtではcomponentsの中にファイルを作成するとコンポーネントとして扱うことができます。
今回CSSの記述については割愛します。
<template lang="pug">
.header
header
.logo
a(href="/")
p eLogs
nav
ul
li(v-for="(list, index) in lists" :key="index")
a(:href="list.link")
p(v-html="list.txt")
</template>
<script>
export default {
data() {
return {
lists: [
{ txt: 'Blog', link: '<https://pg-log.com/>' },
{ txt: 'Contact', link: "/<https://pg-log.com/contact/>" },
],
}
},
}
</script>
<style lang="stylus">
.header
width 100%
border-bottom 1px solid #eee
margin-bottom 30px
background main-color
header
max-width 1280px
margin 0 auto
display flex
align-items center
height 70px
padding 10px 15px
box-sizing border-box
.logo
a
p
font-size rem(32px)
line-height rem(36px)
color #fff
font-weight bold
nav
margin-left auto
ul
display flex
justify-content center
align-items center
li
margin-left 20px
padding 10px
box-sizing border-box
a
p
font-size rem(18px)
line-height rem(24px)
font-weight bold
</style>
html
<template lang="pug">
.header
header
.logo
a(href="/")
p eLogs
nav
ul
li(v-for="(list, index) in lists" :key="index")
a(:href="list.link")
p(v-html="list.txt")
</template>
テンプレートの中にhtmlの要素を記述します。
よくありそうな、ヘッダーのレイアウトなので説明は割愛します。
vueが関係している部分は、navの部分ですね。
使っているものとしては、
- v-html
- v-for
- v-bind
の3つになります。
v-forの使い方については下記の記事で説明しているので、分からない方は参考にしてください。
vue
<script>
export default {
data() {
return {
lists: [
{ txt: 'Blog', link: '<https://pg-log.com/>' },
{ txt: 'Contact', link: "/<https://pg-log.com/contact/>" },
],
}
},
}
</script>
vueの記述はシンプルになっているかと思います。
まずは、ヘッダーに表示させたいデータを定義しそのデータをv-forを使って表示してあげるだけです。
コンポーネントの作成方法については以上になります。
呼び出しもとのファイルの作成
呼び出し元のファイルに関しては、index.vueというファイルで作成します。
ファイルの作成場所は、pagesの中で大丈夫です。
<template lang="pug">
div
Header
</template>
中身はこれだけです。
こうすることで、ヘッダーコンポーネントを呼出すことができます。
まとめ
コンポーネントはよく使い技術になるので覚えておいて損はないので必ず使い方を知っている方がいいです。
コンポーネントを使うメリットとしては、とにかく修正が楽になることです。
あとは、何回も同じ記述をしなくて住むのでコードがスッキリします。
コメント