コンポーネントを親に登録

2019/07/28
親のVue にコンポーネントを登録することで、子のイベントを管理できる

コンポーネント作成(変数)


var コンポーネント変数 = Vue.extend({
      template: 'HTML',    //methods で登録したメソッドを実行可能
      data: function () { return { データ名 : 値 } },   //コンポーネント内で利用できる変数を登録
      methods: { コンポーネント内のメソッド }    //template 内で利用可能
)}
親に登録しない場合は、Vue.component() でもよい

var コンポーネント変数 = Vue.component('counter-button', {
      template: 'HTML',
      data: function () { return { データ名 : 値 } },
      methods: { コンポーネント内のメソッド }
})

コンポーネント登録


new Vue({
    el: "#id",
    components : { 'HTMLタグ名' : コンポーネント変数 }, //タグ名はケバブケース(kebab-case)
    data: { オブジェクト }  //Element内のオブジェクト
    methods: { メソッド }  //Element内のメソッド
}

サンプル(Vue.js入門 基礎から実践アプリケーション開発まで:第3章)

HTML


  <div id="fruits-counter">
    <div v-for="fruit in fruits">
      {{fruit.name}}
      :
      <counter-button v-on:increment="incrementCartStatus()"></counter-button>
     //v-on:increment カスタムイベント設定し、他のメソッドを実行
    </div>
    <p>Total: {{total}}</p>
  </div>

Javascript


    var counterButton = Vue.extend({
      template: '<span>{{counter}} amounts <button v-on:click="addToCart">Add</button></span>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        addToCart: function () {
          this.counter += 1
          this.$emit('increment') //add custom event
        }
      }
    })
    new Vue({
      el: '#fruits-counter',
      components: {
        'counter-button': counterButton
      },
      data: {
        total: 0,
        fruits: [
          { name: 'Pear'},
          { name: 'Strawbery'}
        ]
      },
      methods: {
        incrementCartStatus: function() {
          this.total += 1
        }
      }
    });
Mac に minikube をインストール
途中から .gitignore に追加する
Larevel 6.x から Laravel 8.x にバージョンアップ
Composer で Allowed memory size (メモリ不足)エラー
Blade でカスタムクラスを利用する
git push git pull にブランチ指定せずに実行する
git pull や git push できなくなったとき
Docker のコンテナからホストOS に接続
Mac で ローカル IP アドレス(ipv4)のみを表示する
ホストOS から Docker の MySQLコンテナに接続
caching_sha2_password のエラー
node-config で環境設定ファイルを利用する
rootパスワードを初期化(再設定)する
Git から clone したときのエラー対処
Mac に MySQL をインストール
Mac に PostgreSQL をインストール
Laravel 環境構築 - Mac ネイティブ編
Firebase 入門 - Firebase とは
Firebase 入門 - CLI インストールとデータベースの設定
AWS 無料枠(t2.micro)で容量とメモリエラー
Cloud9 を起動する -初心者編-
gcloud で GCEインスタンスを起動してみる
AWS CLI と jq でインスタンス一覧を整形して表示
React と Laravel7 のプロジェクトを作成する
Homebrewインストール-2020年版
3直線で囲まれた範囲塗りつぶし
PuLP で線形最適化問題を解く
カスタムのペジネーションを作る
node-sass を使って sass をコンパイルする
Log ファサードでSQLログを分離して書き出す
いちから始める Docker - 複数のコンテナを使う - (2020年)
いちから始める Docker - docker-compose を使う - (2020年)
AWS ECR を使ってみる
Laravel7 でマルチ認証
Mac に AWS Client を設定する
Laravel7 リリース
v-html でHTML表示する
Laravel で Nuxt.js を使ってみる(Docker環境)
Laravel で Vue コンポーネントを使う
いちから始める Docker -コンテナをビルド- (2020年)
いちから始める Docker -起動してみる- (2020年)
Mac で MySQL(8系)
composer で vendor がインストールできない
Eloquent の日付を Carbon で扱う
webpack 4 入門(npm編)
[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移