プログラミングマガジン

プログラミングを中心にIT技術をできるだけわかりやすくまとめます。

  • ホーム
  • Vue.js
  • 【Vue.js】「コンポーネント」の基本
 
 
     
  • サーバー言語  
    • Python
    • Ruby
    • PHP
    • SQL
  •  
  • インフラ  
       
    • AWS
    •  
    • 基本
    • Git
  • Web
       
    • Web開発
    • JavaScript
    • Vue.js
    • React
  •  
  • 設計  
       
    • 実装設計
    • DB設計
  • 問い合わせ
  

【Vue.js】「コンポーネント」の基本

07.16

  • miyabisan2
  • コメントを書く

この記事は2分で読めます

コンポーネントとは?

HTML,CSS,javaScript等をセットにして特定の機能を持つセットという部品として切り出すことができるVue.jsの機能のことです。

コンポーネントのメリット

  • 必要なコードをすぐに見つけることができる。
  • 1つの機能をメンテナンスするために複数ファイル見なくてよくなる。
  • 再利用性が上がり開発効率が向上する。

コンポーネントのメカニズム

いわば、設計図でプロパティやアクションを定義しておけます。

そこから生成されたものを「インスタンス」と呼びます。Javaのクラスのような存在のことですね。

コンポーネントの利用例

例えば、商品サイトで下記のパーツはほとんど作りが同じなのに、文言だけ異なるということはよくあると思います。

  • 新着商品
  • おすすめ商品

コンポーネントの種類

コンポーネントには、下記の2種類が存在します。現実的には影響範囲が広がらないようにローカルコンポーネントの方がよく使われています。

  • グローバルコンポーネント
  • ローカルコンポーネント

グローバルコンポーネント

特徴

全てのVueインスタンス呼び出しで、コンポーネントを有効にします。

構文(カスタムタグ方式)

最も一般的なコンポーネントの定義方式です。

1
Vue.component(コンポーネントの名前,コンポーネントの定義情報)

構文(サブコンストラクタ方式)

コンストラクタベースのコンポーネント定義になります。基本的には上のカスタムタグ方式でコンポーネントを定義すれば良いと思いますが、コンポーネントのマウント自体を制御したい場合はこちらを使うと良いでしょう。

1
2
3
4
5
const コンポーネント名 = Vue.extend({コンポーネントの定義情報})
//コンポーネントの使い方1
new コンポーネント名().$mount('親コンポーネント名')
//コンポーネントの使い方2
Vue.component('コンポーネント名',コンポーネント名)

ローカルコンポーネント

特徴

  • 特定のVueインスタンス配下でしか利用しないことがわかっている場合にはこちらを利用します。
  • また、グローバルだと何かしらトラブルやコードの複雑化に繋がるのでそれを回避する目的でも使えます。

構文

1
2
3
4
5
6
7
8
9
10
const ローカルコンポーネント名 = {
    template:'HTML'
}
 
new Vue({
  el: 'DOM',
    components: {
    'test-component': ローカルコンポーネント名
  }
})

グローバルコンポーネントを簡単に実装する。

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>test</title>
</head>
<body>
<div id="app">
<comp-test></comp-test>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script>
 
Vue.component('comp-test', {
  template: '<p>componentテスト</p>'
})
 
new Vue({
  el: '#app'
})
 
</script>
</body>
</html>

コンポーネントは、ルートインスタンスが作成される前に定義する必要があります。なので、必ず「new Vue」する前に定義するようにしましょう。

実行結果

ローカルコンポーネントを簡単に実装する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>test</title>        
</head>
<body>
<div id="app">
    <local-comp></local-comp>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script>
//Vue.extendによるサブコンストラクタ方式の構文により置き換えることも可能です。
var MyHello = {
    template: '<div>ローカルコンポーネント</div>'
  };
 
new Vue({
    el: '#app',
    components: {
        'local-comp': MyHello
    }
});
</script>
</body>
</html>

SFC(.vueファイル)から別のSFC(.vue)をローカル登録する。

実務ではSFC(.vueファイル)では下記のように別のSFCをローカル登録して使っていくことになります。下記のようにimportした上でローカル登録をする必要があります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue'
 
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

スポンサーリンク
  • 2018 07.16
  • miyabisan2
  • コメントを書く
  • Vue.js
  • Tweets Twitter
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2018 07.17

    【Vue.js】「Vue Router」の基本、「Vuex」と連携してルーティング情報を一元管理

  2. 2020 05.30

    【Vue.js】v-onのイベント修飾子(.stop、.prevent、.native、.sync)について

  3. 2020 04.05

    【Vue.js】「フィルター」について

  4. 2020 04.12

    【Vue.js】コンポーネントから「Vuex」を呼び出す。

  5. 2018 07.08

    【Vue.js】Vue.jsの設計思想(リアクティブシステム、データバインディング機能、仮想DOMなど)

  6. 2018 07.08

    【Vue.js】「v-on(イベントハンドリング)」、「キー修飾子」について

  • コメント ( 0 )
  • トラックバック ( 0 )
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

返信をキャンセルする。

【Vue.js】「v-model」、コンポーネント間で…

【Vue.js】「コンポーネントの親子関係」について

RETURN TOP

著者プロフィール

エンジニア歴10年で過去に業務系、Webデザイン、インフラ系なども経験あります。現在はWeb系でフロントエンド開発中心です。

詳細なプロフィールはこちら

スポンサーリンク

カテゴリー

  • Android
  • API
  • AWS
  • C++
  • CSS
  • C言語
  • DDD
  • DevOps
  • Django
  • Docker
  • Git
  • GitLab
  • GraphQL
  • Hasura
  • Java
  • JavaScript
  • Kubernetes
  • Laravel
  • linux
  • MySQL
  • Next.js
  • nginx
  • Node.js
  • NoSQL
  • Nuxt.js
  • Oracle
  • PHP
  • Python
  • React
  • Redux
  • Rspec
  • Ruby
  • Ruby on Rails
  • Sass
  • Spring Framework
  • SQL
  • TypeScript
  • Unity
  • Vue.js
  • WebRTC
  • Webサービス開発
  • Webデザイン
  • Web技術
  • インフラ
  • オブジェクト指向
  • システム開発
  • セキュリティ
  • その他
  • データベース
  • デザインパターン
  • テスト
  • ネットワーク
  • プログラミング全般
  • マイクロサービス
  • マイクロソフト系技術
  • マルチメディア
  • リファクタリング
  • 副業
  • 未分類
  • 業務知識
  • 設計
  • 関数型言語
RETURN TOP

Copyright ©  プログラミングマガジン | プライバシーポリシー