子コンポーネントから親コンポーネントへ〜$emitを使って〜

子要素から親要素へのデータの受け渡し

公式では、データの受け渡しではなく、「子コンポーネントのイベントを購読する」と行っています。要するに、親コンポーネントから子コンポーネントのイベントを発火させるという意味です。

子コンポーネントから親コンポーネントにデータを受けわたすということは、実際のところ不可能であるため、親コンポーネントから、子コンポーネントのイベントを発火させることで、擬似的にこれらの処理を実現することになります。

$emit

使うのは$emitというメソッドです。

<div id="components-demo">
  <h1>{{ number }}</h1>
  <sample-button  
    :totalNumber="number" 
    v-on:my-click="number += $event"
  >
  </sample-button>
</div>

Vue.component('sample-button', {
  props: {
    totalNumber: {
      Type: Number,
    }
  },
  methods: {
    increment(){
      this.$emit("my-click", this.totalNumber += 1);
    }
  },
  template: '<button v-on:click="increment()">+1</button>'
})

new Vue({
 el: '#components-demo',
 data(){
    return {
      number: 10
    };
  },
})

Leave a Reply

Your email address will not be published. Required fields are marked *

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)