Vue.jsでメソッドをプロップスとして渡す方法

1. 親コンポーネントから子コンポーネントへのメソッドの渡し方:

親コンポーネントで子コンポーネントを呼び出す際に、v-bindディレクティブを使用してメソッドを渡します。以下の例では、"parentMethod"というメソッドを子コンポーネントに渡しています。

<template>
  <div>
    <child-component :child-method="parentMethod"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent,
  },
  methods: {
    parentMethod() {
      // 親コンポーネントのメソッドの処理
    },
  },
}
</script>

2. 子コンポーネントで親から渡されたメソッドを使用する方法:

子コンポーネントでは、propsオプションを使用して親から渡されたメソッドを受け取ることができます。以下の例では、受け取ったメソッドをボタンのクリックイベントで実行しています。

<template>
  <div>
    <button @click="childMethod">Click me</button>
  </div>
</template>
<script>
export default {
  props: ['childMethod'],
  methods: {
    childMethod() {
      // 親から渡されたメソッドの処理
      this.childMethod();
    },
  },
}
</script>

これらのコード例を使うことで、Vue.jsでメソッドをプロップスとして渡す方法を実装することができます。