コンポーネントに定義したFunction型のpropsにメソッドを渡して処理を行う [Vue.js]

Vue.jsの親子コンポーネント間の通信は、親から子へデータを渡す時にはpropsを使用し、子から親へ通知を行う時には$emitメソッドを使用します。

$emitメソッドを使用して子コンポーネントから親コンポーネントへイベントを通知することで、親コンポーネントに定義したメソッドを子コンポーネントで発行したイベントで処理することができます。

今回の記事では、この動作と同様のことをコンポーネントのpropsを使用して行う方法について紹介します。

1 $emitメソッドでイベントを発行して処理を行う場合
2 親コンポーネントの処理（メソッド）をpropsで受け取って子コンポーネントで実行する場合
3 propsでメソッドを渡す利点

$emitメソッドでイベントを発行して処理を行う場合

以下に子コンポーネントの$emitメソッドでイベントを発行し、そのイベントを親のアプリケーションで購読して処理を行う例を示します。

HTML

<script type="text/x-template"
        id="custom-button">
  <button v-on:click="onClick">ボタン</button>
</script>

<div id="app">
  <custom-button v-bind:button-click="buttonClick"
                 v-on:button-click="buttonClick"></custom-button>
</div>

id="custom-button">

</script>

<custom-button v-bind:button-click="buttonClick"

v-on:button-click="buttonClick"></custom-button>

</div>

JavaScript

// コンポーネント
const customButton = {
  template: '#custom-button',
  methods: {
    onClick: function() {
      this.$emit('button-click');
    }
  }
}

// アプリケーション
Vue.createApp({
  components: {
    'custom-button': customButton
  },
  methods: {
    buttonClick: function() {
      console.log('abc');
    }
  }
}).mount('#app')

// コンポーネント

const customButton = {

template: '#custom-button',

methods: {

onClick: function() {

this.$emit('button-click');

}

// アプリケーション

Vue.createApp({

components: {

'custom-button': customButton

methods: {

buttonClick: function() {

console.log('abc');

}

}).mount('#app')

上記の例では、子コンポーネントのbutton要素がクリックされたタイミングで$emitメソッドでイベントを発生させ、親のアプリケーションでそのイベントを購読して処理（コンソールログ出力）を行っています。

通常はこのように何らかの処理を行いたいタイミングで、子コンポーネント側から$emitメソッドを用いてイベントを発生させて、親コンポーネント側でそのイベントにメソッドをバインドして処理を行いますが、子コンポーネントにFunction型のデータを受け取るpropsを定義することで、同様の動作をさせることができます。

親コンポーネントの処理（メソッド）をpropsで受け取って子コンポーネントで実行する場合

以下に子コンポーネントのpropsに親のアプリケーションのメソッドを渡して、子コンポーネント側で受け取ったメソッドを実行する例を示します。

<script type="text/x-template"
        id="custom-button">
  <button v-on:click="buttonClick">ボタン</button>
</script>

<div id="app">
  <custom-button v-bind:button-click="buttonClick"></custom-button>
</div>

id="custom-button">

</script>

<custom-button v-bind:button-click="buttonClick"></custom-button>

</div>

// コンポーネント
const customButton = {
  template: '#custom-button',
  props: {
    buttonClick: {
      type: Function,
      required: true
    }
  }
}

// アプリケーション
Vue.createApp({
  components: {
    'custom-button': customButton
  },
  methods: {
    buttonClick: function() {
      console.log('abc');
    }
  }
}).mount('#app')

// コンポーネント

const customButton = {

template: '#custom-button',

props: {

buttonClick: {

type: Function,

required: true

}

// アプリケーション

Vue.createApp({

components: {

'custom-button': customButton

methods: {

buttonClick: function() {

console.log('abc');

}

}).mount('#app')

上記の例では、親コンポーネントのmethodsオプションに定義したbuttonClickメソッドを子コンポーネントのpropsに定義したbuttonClickプロパティに指定しています。
子コンポーネント側では、buttonClickプロパティで受け取ったメソッドをコンポーネント内に配置されたbutton要素がクリックされたタイミングで呼び出すことで、ボタンのclickイベントを処理しています。

propsでコンポーネントを利用する側からメソッドを渡せるので、C#のdelegateに似たような実装が可能になります。