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.

Vue.jsまとめ⑤ コンポーネント

Posted at

下書きが上限に達しているので仮の状態で投稿しています

Vueインスタンスを再利用するため
Vue.component('コンポーネントの名前', {コンポーネントの情報})
コンポーネントを使用するときは<コンポーネントの名前>コンポーネントの名前>
コンポーネントの情報はVueインスタンスのelプロパティ以外
ただし、dataは関数として書く(別のコンポーネントとも共有してしまうから)

グローバル登録
main.jsに
import 名前 from 場所
Vue.component('コンポーネントの名前', {コンポーネントの情報})

ローカル登録
変数 = コンポーネントの情報 #Vueファイルはそのままexport
続けてVueインスタンス内で(使いたいファイルのscriptタグ内で)
import 名前 from 場所
components:{
 'コンポーネントの名前': 変数 #同じなら省略可能
}

単一ファイルコンポーネントはインポートしたらオブジェクトになる

○単一ファイルコンポーネントの使い方
scriptタグはexport defaultで囲ってdataやmethodsなどを書く
templateタグは一つの要素にまとめる(divなど)

ケバブケース(like-number)かパスカルケース(LikeNumber)

styleタグ
CSSを記述
scopedで自身のコンポーネント内だけに限定する

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?