frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

CodepenでできるVueの基礎を学ぶVol.5 コンポーネントでUI部品を作る

スポンサードリンク


スポンサードリンク


こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

こちらの記事で気になることは本の中に全て書いてあるので是非参照してみてください。
今回はvol.5はコンポーネントでUI部品を作るです。

コンポーネントの決まりごと

コンポーネントは以下の決まりごとがあります。

  • コンポーネントのデータはオブジェクトを返す関数にする必要がある
  • テンプレートのルート要素は単一でなければならない
template: '<span></span><span></span>'

はNG

template: '<div><span></span><span></span></div>'

はOK

コンポーネント間でデータを共有・連携する方法

  • propsとカスタムイベントを使った親子間の通信
  • イベントバスを使った非親子間の通信
  • Vuexを使った状態管理

コンポーネント間の通信 / 親から子

See the Pen EdRKaO by funclur (@funclur) on CodePen.

文字が表示されず、原因も分かりませんでした。

  • props downは親コンポーネントから子コンポーネントにデータを渡す単一方向のデータフロー

子コンポーネントで上書き

See the Pen NOzNbv by funclur (@funclur) on CodePen.


コンポーネントをリストレンダリング

See the Pen PyJbxw by funclur (@funclur) on CodePen.


エラーになるパターン

See the Pen pxKywV by funclur (@funclur) on CodePen.

propsのhpプロパティは親コンポーネントから借りてるだけなので子コンポーネント側で勝手に書き換えてはいけない。
算出プロパティを使えば可能。

propsの受け取りデータ型を指定する

Vue.component('example', {
  props: {
// 数字
    propA: Number,
// 複数    
propB: [String, Number],
    propC: {  
// 必須文字列      
type: String,
      required: ture
    },
    propD: {
// デフォルト値
      type: Number,
      default: 100
    },
// オブジェクトと配列のデフォルトをファクトリ関数から返す
    propE: {
      type: Object,
      default: function(){
        return { message: 'hello' }
      }
    },
// カスタムバリデータ関数  
    propF: {
      validator: function(){
        return value > 10
      }
    }
  }
})

子のイベントを親にキャッチさせる

See the Pen yREOKx by funclur (@funclur) on CodePen.

$emitはjQueryでいうtriggerと似たものです。

親が持つデータを操作しよう

See the Pen rqKevR by funclur (@funclur) on CodePen.


コンポーネント間の通信 / 非親子

See the Pen wYXGYp by funclur (@funclur) on CodePen.


子コンポーネントを参照する$refs

See the Pen aRKNMb by funclur (@funclur) on CodePen.


コンポーネントの v-model

See the Pen XxYdwv by funclur (@funclur) on CodePen.


動的コンポーネント

See the Pen zmaBYY by funclur (@funclur) on CodePen.


vue.jsを学ぶならudemyもおススメです!