プログラミング

[NuxtJS]子コンポーネントのメソッドを実行する

プログラミング
この記事は約4分で読めます。
スポンサーリンク

NuxtJSrefsを使用して子コンポーネントのメソッドを実行する方法を説明します。

スポンサーリンク

前提条件

  • vue:2.6.14
  • nuxt:2.15.8
  • vuetify:2.6.1

こちらから今回のソースコードを確認できます。

GitHub - koichi-ezato/nuxt-sample at 子コンポーネントのメソッドを実行する
Contribute to koichi-ezato/nuxt-sample development by creating an account on GitHub.

子コンポーネント

まず、子コンポーネントを実装します。

Child.vue

<template>
  <v-card-text v-text='value' />
</template>

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      value: '子コンポーネント',
    }
  },
  methods: {
    changeValue() {
      this.value = '子コンポーネントのメソッドが実行されました'
    }
  },
}
</script>

changeValueメソッドでvalueの値を変更するだけのシンプルな子コンポーネントを作成します。

親コンポーネント

ParentComponent.vue

<template>
  <v-card>
    <v-card-title>親コンポーネント</v-card-title>
    <child-component ref='child' />
    <v-card-actions>
      <v-btn tile color='primary' @click='execChildComponent'>子コンポーネントのメソッド実行</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
import ChildComponent from '~/components/Child'

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  methods: {
    execChildComponent() {
      this.$refs.child.changeValue()
    }
  }
}
</script>

子コンポーネントの呼び出し時にrefを設定します。

<child-component ref='child' />

ボタンクリックイベントで子コンポーネントを実行しています。

<v-btn tile color='primary' @click='execChildComponent'>子コンポーネントのメソッド実行</v-btn>
    execChildComponent() {
      this.$refs.child.changeValue()
    }

動作確認

では、実際の動作を確認してみます。

ボタンをクリックすると…

子コンポーネントのメソッドが実行され、子コンポーネントのvalueの値が変更されました!!

最後に

子コンポーネントのメソッドを親から実行することができれば、よりコンポーネント毎に役割を分担して実装を進めることができそうです。

こちらから今回のソースコードを確認できます。

GitHub - koichi-ezato/nuxt-sample at 子コンポーネントのメソッドを実行する
Contribute to koichi-ezato/nuxt-sample development by creating an account on GitHub.
スポンサーリンク
スポンサーリンク
スポンサーリンク
KoEをフォローする
CodeLab

コメント

タイトルとURLをコピーしました