Vue.js / Nuxt.jsのコンポーネント親子間通信の方法について

今回はコンポーネント親子間通信の方法についてまとめたいと思います。

こちらも大小さまざまなプロジェクトで必須になるかと思います。
私自身もふとした瞬間思い出せなくなるのでしっかり流れを覚えていきましょう。

値の受け渡し

親から子

parent.vue

<template>
  <div>
    <Child message="Hello!" />
    <Child :message="msg" />
  </div>
</template>

<script>
import Child from '~/components/child.vue'

export default {
  components: {
    Child
  },

  data() {
    return {
      msg: 'Goodmorning!'
    }
  }
}
</script>

child.vue

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

親コンポーネントの子コンポーネントを記述しているところで値を設定します。
その値を子コンポーネントのpropsで受け取ります。

また、上に記述している通り、「:message」で変数を渡すこともできます。

子から親

parent.vue

<template>
  <div>
    <p>{{ message }}</p>
    <Child />
  </div>
</template>

<script>
import Child from '~/components/child.vue'

export default {
  components: {
    Child
  },

  data() {
    return {
      message: ''
    }
  }
}
</script>

child.vue

<template>
  <div>
    <button @click="click">Child Btn</button>
  </div>
</template>

<script>
export default {
  methods: {
    click() {
      this.$parent.message = 'Good afternoon!'
    }
  }
}
</script>

上記のように「this.$parent」の後に親の変数を指定すると、
親の変数に値を入れることができます。

メソッドの呼び出し

親から子

parent.vue

<template>
  <div>
    <Child ref="Child" />
    <button @click="click">子のイベント実行</button>
  </div>
</template>

<script>
import Child from '~/components/child.vue'

export default {
  components: {
    Child
  },

  methods: {
    click() {
      this.$refs.Child.childEvent()
    }
  }
}
</script>

child.vue

<template>
  <div></div>
</template>

<script>
export default {
  methods: {
    childEvent() {
      console.log('Child!')
    }
  }
}
</script>

親コンポーネントで子コンポーネントのref属性を「$refs」で指定して、メソッドを呼び出すことができます。

子から親

parent.vue

<template>
  <div>
    <Child parent="parentEvent" />
  </div>
</template>

<script>
import Child from '~/components/child.vue'

export default {
  components: {
    Child
  },

  methods: {
    parentEvent() {
      console.log('Parent!')
    }
  }
}
</script>

child.vue

<template>
  <div>
    <button @click="click">親のイベント実行</button>
  </div>
</template>

<script>
export default {
  methods: {
    click() {
      this.$emit('parent')
    }
  }
}
</script>

this.$emitで親コンポーネントにイベントを伝え、
親コンポーネントの「<Child parent="parentEvent" />」で受け取り、イベントを実行します。


また、下記のように記述をすれば親のメソッドに引数も渡すことができます。

this.$emit('parent', 'Good evening!')

おわりに

コンポーネント機能を活用すればするほど親子間での通信は必要になってくるかと思います。
頻繁に使用するので覚えてきましょう。

余談ですが、
親子間だけではなく、コンポーネント同士の値のやりとりも必要になる場合があります。
そういう時はVuexのStoreの機能を使用すると良いでしょう。