Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Vue.jsで、親コンポーネントからもらった変数を子コンポーネントで更新したいときの対処法

More than 1 year has passed since last update.

Vue.jsで、すぐ忘れちゃうコンポーネントの記述方法。
とくに親コンポーネントからもらった変数を子コンポーネントが更新したい場合の記述方法について備忘録。

この辺のはなしです。https://jp.vuejs.org/v2/guide/components.html

イントロ

Vue.js は、親コンポーネントから渡された変数を子コンポーネントで更新しようとすると、下記のwarningが出ます。

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "data"

「親コンポーネントから渡された変数を子コンポーネントで更新」っていうコードは具体的にはこんなケースです。

ParentView.vue(親)
<template>
  <div>
    <NgComponent :data="param1"></NgComponent>
    親:[{{ param1 }}]
  </div>
</template>

<script>
import NgComponent from './NgComponent.vue'

export default {
  name: 'HelloWorld',
  components: {
    NgComponent,
  },
  data: () => ({
    param1: 1,
  }),
}
</script>
NgComponent.vue(子)
<template>
  <div>
    <button v-on:click="handle">ボタン</button>
    <div>子:{{ data }}</div>
  </div>
</template>

<script>
export default {
  props: {
    data: Number,
  },
  methods: {
    handle() {
      console.log('NGバージョン start')
      console.log(this.data)
      this.data += 10 // 親からもらったパラメタを変更しようとすると、ココで怒られる
      console.log(this.data)
      console.log('NGバージョン end')
    },
  },
}
</script>

実務だと「子コンポーネントに渡した配列に、コンポーネント側がつねに、Firestoreからとってきた最新データを更新し続ける」なんてケースがありました。

さて、上記のwarningがでるとき、子のコンポーネントでは値が更新されるのですが、親がわには反映されません。対処法として渡す変数の型をObjectにする、つまり

(親)
  data: () => ({
    param1: { p1: 1 },
  }),
(子)
<script>
export default {
  props: {
    data: Object,
  },
  methods: {
    handle() {
      console.log('NGバージョン start')
      console.log(this.data)
      this.data.p1 += 10
      console.log(this.data)
      console.log('NGバージョン end')
    },
  },
}
</script>

って対応もできるっぽいのですが、そもそもVue.jsではコンポーネント間での結合を疎にするために「子でのコンポーネントの値の変更」を許可(推奨?)していないようです。なのでそれをやりたければ、

  • 親から子コンポーネント → props プロパティ経由で参照を渡す
  • 子から親コンポーネント → $emit というイベント機構で親へ通知(そのさい、変更後データも渡す)

とする必要があるようです。
ってことで子のコンポーネントでのデータ更新を、親へ伝播する方法を整理しました。

$emitによる通知

親からもらう変数は直接変更は出来ないのですが、先の$emitを用いることで

  • 親からはvalueという属性で、親がわの変数を受け渡す
  • 子コンポーネント側でcomputedな変数(下記コード中のlocalParam)を定義
  • localParamgetter/setterとして、親からもらった変数を操作(更新じゃないよ)するように定義。
  • 操作とは具体的には、setterで(変更はダメなので) $emitを使ってinputという名前のイベントを発生させ、親に変更した値を通知します。
  • 親はinputイベントを監視して、そこから取得できる$event変数経由で変更された値をもらって、もとのパラメタに反映させます

というやり方。具体的には下記の通り。

ParentView.vue(親)
<template>
  <div>
    <h2>対応策1(OkComponent1.vue)</h2>
    <OkComponent1 :value="param1" @input="param1 = $event"></OkComponent1>
    [{{ param1 }}]
  </div>
</template>

<script>
import OkComponent1 from './OkComponent1.vue'

export default {
  name: 'HelloWorld',
  components: {
    OkComponent1,
  },
  data: () => ({
    param1: 1,
  }),
}
</script>
OkComponent1.vue(子)
<template>
  <div>
    <button v-on:click="handle">ボタン</button>
    <input type="text" v-model="localParam" />
    <div>{{ localParam }}</div>
  </div>
</template>

<script>
// 値をこちらのコンポーネントで書き換える場合
export default {
  props: {
    value: Number,
  },
  computed: {
    localParam: {
      get: function() {
        return this.value
      },
      set: function(value) {
        this.$emit('input', value) // おやでは @input に書いたメソッドがよばれる。引数にvalue
      },
    },
  },
  // data: vm => ({}),
  methods: {
    handle() {
      console.log('v-modelバージョン start')
      console.log(this.localParam)
      this.localParam += 10 // 実際は、うえのsetterが呼ばれてemitされる
      console.log(this.localParam)
      console.log('v-modelバージョン  end')
    },
  },
}
</script>

このようにcomputedで定義された変数のアクセッサ(getter/setter)を上書きすることで、親からもらった変数を子がわでふつうに操作する感覚$emitすることができます。

子での変更は inputというイベントで通知されるので、親がわはそれを監視して値を取り出し、再度、該当する変数に代入すればよいということですね。

v-modelをつかう

上記の対応ですが、親がわのコード<OkComponent1 :value="param1" @input="param1 = $event"></OkComponent1>は、じつは<OkComponent1 v-model="param1"></OkComponent1>という簡略記法があるようです。このsyntactic sugarを使うと、親は下記のように書くことが出来ます。。

(親)
<template>
  <div>
    <h2>対応策1(のsyntactic sugarバージョン)(OkComponent1.vue)</h2>
    <OkComponent1 v-model="param1"></OkComponent1>
    [{{ param1 }}]
  </div>
</template>

<script>
import OkComponent1 from './OkComponent1.vue'

export default {
  name: 'HelloWorld',
  components: {
    OkComponent1,
  },
  data: () => ({
    param1: 1,
  }),
}
</script>

よくでてくるv-modelでパラメタを渡せるコードになりました。

まとめるとv-model の方式はvalueという属性で子に変数を渡して、inputというイベント名で通知を待つよう、あらかじめつくられているようですね。。

参考: コンポーネントで v-model を使う

複数の変数を渡したい場合

v-modelは一つの変数をvalue で渡すことができましたが、複数パラメタを渡したい場合もあります。そのために.sync修飾子というのがあるんですが、まずはそういったsyntactic sugarを用いないやり方でやると、下記の通りになります。

ParentView.vue(親)
<template>
  <div>
    <h2>複数パラメタを渡すパタン(.sync未使用パタン)(OkComponent2.vue)</h2>
    <OkComponent2
      :param="param1"
      :paramObj="param2"
      @update:param="param1 = $event"
      @update:paramObj="param2 = $event"
    ></OkComponent2>
    [{{ param1 }}] [{{ param2 }}]
  </div>
</template>

<script>
import OkComponent2 from './OkComponent2.vue'

export default {
  name: 'HelloWorld',
  components: {
    OkComponent2,
  },
  data: () => ({
    param1: 1,
    param2: { param1: 2 },
  }),
}
</script>
OkComponent2(子)
<template>
  <div>
    <button v-on:click="handle">ボタン</button>
    <input type="text" v-model="localParam" />
    <div>{{ localParam }}</div>

    <input type="text" v-model="localParamObj.param1" />
    <div>{{ localParamObj.param1 }}</div>
  </div>
</template>

<script>
// 値をこちらのコンポーネントで書き換える場合
export default {
  props: {
    param: Number,
    paramObj: Object,
  },
  computed: {
    localParam: {
      get: function() {
        return this.param
      },
      set: function(value) {
        this.$emit('update:param', value)
      },
    },
    localParamObj: {
      get: function() {
        return this.paramObj
      },
      set: function(value) {
        this.$emit('update:paramObj', value)
      },
    },
  },
  // data: vm => ({}),
  methods: {
    handle() {
      console.log('syncを使って、子で値を変更パタン start')
      this.localParam -= 1
      this.localParamObj.param1 += 1
      console.log('syncを使って、子で値を変更パタン end')
    },
  },
}
</script>

親からは:param="param1",:paramObj="param2" で変数を渡しています。子がわは、それぞれの変数に対してcomputedな変数を定義し、値を操作します。親へ通知するイベントは

this.$emit('update:param', value)
this.$emit('update:paramObj', value)

としています。先ほどはinputでしたが、今回はupdateとしています(なぜかは後述)。

複数のパラメタをやりとりする場合はコレでOKです。

そのsyntactic sugar版

<OkComponent2
  :param="param1"
  :paramObj="param2"
  @update:param="param1 = $event"
  @update:paramObj="param2 = $event"
></OkComponent2>

は、.sync という簡易的な記法を用いて下記の通り書くことが出来ます。

<OkComponent2 :param.sync="param1" :paramObj.sync="param2"></OkComponent2>

こうです。コレで param,paramObjで渡される変数を updateイベントで待ち受けることになるので、子のコンポーネント側は更新時updateイベントを発行すればよいわけですね。

超備忘で、駆け足でした。おつかれさまでした。

今回のコード

下記からダウンロード出来ます。
https://github.com/masatomix/component-samples.git

いちおうですが、具体的なセットアップは以下の通り。

$ git clone --branch  component001 https://github.com/masatomix/component-samples.git
$ cd component-samples/
$ npm install
$ npm run serve

> component-samples@0.1.0 serve /private/tmp/component-samples
> vue-cli-service serve

...
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.10.24:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

上記にアクセス出来ればOKです。

関連リンク

masatomix
JavaEEの開発やリッチクライアント開発のアーキテクトが専門でしたが、最近はRPAとAIがメイン。。。RPAはUiPathとOrchestratorの構築が中心です。 FirebaseとかOAuth/OIDCなど新しいモノ、あと数学もすき。 最近は UiPath Friends っていうユーザコミュニティにも関わってます。 あ、UiPath Japan MVP 2019,2020 す。
primebrains
プライム・ブレインズは、マネジメントスキルだけでなく、最新のITスキルを兼ね備えた技術者がお客様の立場でお客様と共に、成功に向けてプロジェクトを推進します。
http://www.primebrains.co.jp/
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