【Vue.js】コンポーネント内で実行するメソッドを親コンポーネントから渡す

はじめに

例えば、ボタンのコンポーネントを作成して様々な場所で使用したいとき。
ボタン押下時の実行メソッドは全てのページで同じとは限らないので、なにを実行するのかを親で渡してあげる方法の紹介です。

たまに忘れてしまうので頭に叩き込むため＆忘れた時用のメモで残します。
何か間違いや、もっといい方法などありましたらコメントで教えていただけると幸いです。

emitで書いた場合

子コンポーネントの書き方

<template>
  <button
    class="Button"
    @click="clickButton">
    <slot />
  </button>
</template>

<script>
export default {
    name: 'Button',
    methods: {
        clickButton() {
            this.$emit("click-event");
        }
    }
}
</script>

<style scoped>
.Button {
  width: auto;
  padding: 5px;
  text-align: center;
  color: #fff;
  border-radius: 11px;
  background: rgb(80, 156, 80);
}

.Button:hover {
    background: rgba(80, 156, 80,0.3);
}
</style>

クリック時にclickButtonメソッドを呼んでいます。
しかし実際になにを実行するかは親が決めたいのでthis.$emit("clickEvent")と書きました。
　
ボタン押下時はclickButtonメソッドを呼んで、内容は親でこのclickEventに渡されたメソッドを実行するということですね。

親コンポーネントの書き方

<template>
  <Button
   @click-event="buttonConsole">
    ボタン
  </Button>
</template>

<script>
import Button from '@/components/Button.vue'
export default {
  components: { Button },
  methods: {
    buttonConsole() {
      console.log("親コンポーネントでボタン押下")
    }
  }
}
</script>

@click-eventでbuttonConsoleを渡しました。
ボタンを押下するとconsoleが出力されます。

propsで渡した場合

子コンポーネントの書き方

<template>
  <button
    class="Button"
    @click="clickEvent">
    <slot />
  </button>
</template>

<script>
export default {
    name: 'Button',
    props: {
        clickEvent: {
            type: Function,
            required: true
        }
    }
}
</script>

クリック時にメソッドを呼びます。
なんのメソッドを実行するかは親から渡せるようにpropsに定義しました。
　

親コンポーネントの書き方

<template>
  <Button
   :click-event="buttonConsole">
    ボタン
  </Button>
</template>

<script>
import Button from '@/components/Button.vue'
export default {
  components: { Button },
  methods: {
    buttonConsole() {
      console.log("親コンポーネントでボタン押下")
    }
  }
}
</script>

v-onで子コンポーネントにメソッドを渡しています。
この書き方だとrequirdなどの成約をつけることができます。