vue.jsで子から親のイベントハンドラを呼び出してみる

2021年1月15日

vue.jsで子から親のイベントハンドラを呼び出してみる

チートシート作成中です。

プログラム

【子コンポーネント】
$emitは親のテンプレートを通じて親のイベントハンドラを呼び出すための仲介役だそうです。

Vue.component('my-product', {
  // (1)ボタンがクリックされたら子コンポーネントのclickHandlerを呼び出す。
  template: `
  <div>
    <button v-on:click="clickHandler">値下げする</button> {{ price }}(円)
  </div>`,
  props: ['price'],
  methods: {
    // (2)ボタンのクリックイベントハンドラ
    clickHandler: function () {
      // (3)子コンポーネントにchild-clickイベントを発生させる
      this.$emit('child-click');
    }
  }
});

【親テンプレート】

<div id="app">
  <!-- (4)子にchild-clickイベントが発生したら親のpriceDownを呼び出す -->
  <my-product v-on:child-click="priceDown" v-bind:price="price"></my-product>
</div>

【親コンポーネント】

var app = new Vue({
  el: '#app',
  data: {
    price: 980,
  },
  // (5)子から呼び出されるメソッド
  methods: {
    priceDown: function () {
      this.price -= 100;
    }
  }
});