Help us understand the problem. What is going on with this article?

[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でストアを一元化するためのフレームワーク
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした