Chapter3 コンポーネントの基礎

3.1 コンポーネントとは何か

3.1.1 すべてはコンポーネントから構成される

• Webサイトは規模の大小問わずUIの木構造からなる

  • RootがVueインスタンス
  • Vueインスタンスはコンポーネントではないが、便宜上
    「親コンポーネント」と呼ぶこともある

3.1.2 コンポーネント化のメリットと注意点

メリット

• 再利用性

  • 開発効率UP
  • 品質担保
• 適切に区切り、疎結合にすると、保守性が高まる

• カプセル化

  • 影響範囲が閉じる

ただし、何も考えずにテキトーにコンポーネント化して
メリットを享受できるほど甘くはない

3.1.3 Vue.jsのコンポーネントシステム

だいたいVueインスタンスとおなじ

ちがうとこ

• コンポーネント名を指定する

  • ケバブケースにしたものもカスタムタグ名になる
• 使いまわすので、dataにはオブジェクト実体ではなく、
  オブジェクトを返す関数を渡す (3.2.6)
• props: 親から子へのデータ受け渡し

3.2 Vueコンポーネントの定義

定義してからVueインスタンスをマウントすること

しゅるい

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

定義方法

• カスタムタグ方式

  • Vue.component()

• コンストラクタ方式

  • Vue.extend()

3.2.1 グローバルコンポーネントの定義

グローバルコンポーネントをカスタムタグで定義する方法

Vue.component(tagName, options);

optionsは

new Vue(options);

に渡すやつとだいたいおなじ

• tagNameを例えば'myComponent' とすると、
  カスタムタグとしては<my-component>として利用することになる
• css classは引き継がれる

3.2.2 コンストラクタベースの定義

3.2.1では実はこいつが暗黙的に呼ばれている

var MyComponent = Vue.extend({
    /* いつものoptions */
});

// 要素を指定してmountできる
(new MyComponent()).$mount('#hoge');

// カスタムタグ定義の第二引数にも渡せる
Vue.component('my-component', MyComponent);

3.2.3 ローカルコンポーネントの定義

Vueインスタンス内・Vueコンポーネント内に、コンポーネント定義を閉じる

new Vue({
    components: {
        `my-component`: {
            /* いつもの */
        }
    }
})

3.2.4 テンプレートを構築するその他の手段

text/x-template

<script>データブロックを使う

• 記述をHTML側に分割できるのが有能
• ブラウザが認識しないmimeタイプはx-をつけることになっている
• optionsのtemplateには<script>のidを#付きで渡す

インラインテンプレート

これまで使ってきたやつ

描画関数

options.render に描画関数を記述する

render: function (createElement) {
    /* createElement関数を使ってなんやかんやする */
}

• createElementをhと書き、さらにアロー関数を使ってこう書かれることが多いそうな

render: h => {/* ... */}

JSX

SFC: Single File Component

第六章にて

3.3 コンポーネント間の通信

3.3.1 親->子

propsをつかう

props: {
    type: String|Object|...,
    default: デフォルト値,
    required: 必須(true)か否(false)か,
    validator: バリデーション用関数
               - 引数: 渡されたprop
               - return: true(valid)/false(invalid)
}

• props定義は各コンポーネントインスタンスで使いまわせるので、
  一品物のオブジェクトを渡す

  • cf. dataはデータの実体であり、使いまわせないので、オブジェクトを返す関数を渡す
• attr-name="..."でprops.attrNameに渡す
• リアクティブシステム対象外なので注意

3.3.2 子->親

イベントをつかう

• listen

  • component.$on(eventName, callback)
  • v-on

• trigger

  • component.$emit(eventName, ...args)
  • 引数は可変個

3.4 コンポーネントの設計

Atomic Design とか

3.4.3 スロットコンテンツ

• カスタムタグの中身を入れられる

• named-slotとそうでないのがいる

  • 他にもいる気がするけど他章
• named-slotはnameを指定しないと入らない
• <slot>タグ自体が置換される

コラム コンポーネント単位のテスト

• Karma
• mocha

あたりを使っていい感じに