0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Nuxt.js】Nuxt文法編:component①

Posted at

🎈 この記事はWP専用です
https://wp.me/pc9NHC-DX

前置き

componentとは
使いまわしができる、
再利用ができるものです🌟

button.gif

シンプルなボタンでも
CSSが長くなったりして
まいかい書くのは面倒ですよね…😔
それを解決してくれるのが
componentです🌟

作り方、表示のさせ方を解説していきます✍️

目次

前置き
componentの種類と使用箇所
基本コード
Step1: 使い回すコンポーネントを作る
Step2: コンポーネントをインポートする
自動でインポートする
まとめ

componentの種類と使用箇所

種類

まずは種類を把握しましょう。
おおまかに全部で3つあります💡
今回は1の自作のコンポーネント
について解説していきます🍎
前置きに書いたボタンのような場合は
自作のコンポーネントに該当します🙋‍♀️

  1. <好きに命名した名前 />
     =自作のコンポーネント
     importが必要!

 layouts内でのみ使用
3.
 ネストされたルート内で使用

nuxtとnuxt-childについては
別記事でご紹介します🌟

使用箇所

componentsが使える場所
(インポートできる場所)は
ページを構成する部分です!

・layout
・他のコンポーネント
・pageコンポーネント
自作のコンポーネントの場合は
この中のどれでも使用可能です🤗

基本コード

基本コードがこちら。
あとは使いまわしたい物に
作り替えていきましょう👍✨

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-DX

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?