勉強日記

チラ裏

Vue.js入門 基礎から実践アプリケーション開発まで Chapter3

JavaScript 勉強メモ Vue.js

Chapter3 コンポーネントの基礎

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

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

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

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