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

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

前提条件

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

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

https://github.com/koichi-ezato/nuxt-sample/tree/%E5%AD%90%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B

子コンポーネント

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

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の値が変更されました!!

最後に

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

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

https://github.com/koichi-ezato/nuxt-sample/tree/%E5%AD%90%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B

コメントする

メールアドレスが公開されることはありません。