【Vue.js】メソッドを子コンポーネントから呼ぶ

親コンポーネントで定義したメソッドを、子コンポーネントから呼ぶ方法について。

Props として渡す

まず、 props として渡す方法。React エンジニアにとっては馴染みのあるやり方。

<template>
    <Child :function="someFunction" />
</template>

export default {
    methods: {
        someFunction() { ... }
    }
}

Events を経由する

次に events 経由で呼ぶ方法。こちらの方が Vue らしいやり方のようです。

// 親コンポーネント
<template>
  <Child @fire="someFunction" />
</template>

export default {
  methods: {
    someFunction() {
      console.log('呼ばれた');
    }
  }
};

// 子コンポーネント
<template>
  <div v-on:click="handleClick" />
</template>

export default {
  methods: {
    handleClick() {
      this.$emit('fire');
    }
  }
}