Posted at

[Vue] 親コンポーネントのデータ/メソッドを子コンポーネントから使う

More than 1 year has passed since last update.


概要

題の通り、Vueの親子コンポーネント間でのデータとメソッドのやり取りを行う方法の備忘録。

本記事では、以下のようなVueコンポーネントの親子関係を用意し、子コンポーネントから親コンポーネントのデータ、メソッドを利用する。


  • 親コンポーネント(parent)


    • 文字列データ及びそれを書き換えるメソッドを定義



  • 子コンポーネント(child)


    • テキストボックスとボタンと持ち、親のデータの読み書きを行う




前提

以下の環境で動作確認

要素
バージョン

debian
8.6

node
8.6.0

Vue
2.6.1


親コンポーネント

<template>

<div>
<child :data="data" @set="setData"/>
</div>
</template>

<script>
export default {
name: 'parent',
data() {
return {
data: '',
}
},
methods: {
setData(data) {
this.data = data
}
}
}
</script>

子コンポーネント(child)に、属性dataとメソッドsedDataを渡す。

:dataと@setは省略記法で、それぞれv-bind:dataと、v-on:setを省略したもの


子コンポーネント

<template>

<div>
<input type="text" ref="text">
<button @click="$emit('set', $refs.text.value)">Set</button>
<p>{{ data }}</p>
</div>
</template>

<script>
export default {
name: 'child',
props: ['data'],
}
</script>

親コンポーネントから受け取る属性は、propsで定義しなければならない。一見面倒だが、これによって不要な属性を受け取らずに済む。

buttonクリック時に、親コンポーネントのイベントに伝搬するために、$emitを用いる。$emitの第二引数以降が、元のイベントに対する引数になる。


実行結果

画像のように、テキストボックスに文字列を入力し、ボタンをクリックすると、親コンポーネントのsetDataメソッドが実行され、dataが書き換わる。

111.png


備考


  • Vueではコンポーネントの親子関係が深くなるとバケツリレーが始まるので、Vuexを導入が推奨されるみたい

  • VuexはReactにおけるReduxのような、Vueでストアを一元化するためのフレームワーク