Vue で親の値が変わったら子コンポーネントも更新する

Vue.js フロントエンド JavaScript

Vue で親が子コンポーネントに対して値を渡す場合、以下のように props を介して渡します。

index.html

<!-- 子コンポーネント -->
<script type="text/x-template", id="child">
  <div>
    <input v-model="message">
    <a>Child message is: {{ message }}</a>
  </div>
</script>

<div id="example">
  <!-- 親 -->
  <input v-model="message">
  <a>Parent message is: {{ message }}</a>

  <!-- 子 -->
  <!-- props の value に対して親の data を渡す -->
  <child :value="message"></child>
  <child :value="message"></child>
  <child :value="message"></child>
</div>

index.js

Vue.component('child', {
    template: "#child",
    props: ["value"],
    // props は直接 bind できないので data として定義する
    data(){
        return { message: this.value };
    }
})


new Vue({
    el: '#example',
    data: {
        message: "homu"
    },
})

https://jsfiddle.net/Lufwscyz/

上記の場合は、

<child :value="message"></child>

の部分で、親の message を child コンポーネントに渡しています。
また、props は書き換える事ができないので、

data(){
    return { message: this.value };
}

と言う風に data() を使用することで message をバインディングすることができます（あとそれぞれのコンポーネント間ではバインディングしたくなかったので。

親が書き換わった時に子の値も変える

上記のようなケースで、『親の message が変更された場合に child コンポーネントの message も書き換えたい』みたいな事がやりたかったのでやってみました。
とりあえず、いいやり方は思い浮かばなかったので『親から子のメソッドを呼び出す』ことで解決してみることに…。

index.html

<script type="text/x-template", id="child">
  <div>
    <input v-model="message">
    <a>Child message is: {{ message }}</a>
  </div>
</script>

<div id="example">
  <!-- v-on:change を使用して update を行う -->
  <!-- v-on:change は『フォーカスが外れた時』に発火するので注意 -->
  <input v-model="message" v-on:change="update">
  <a>Parent message is: {{ message }}</a>


  <!-- $refs から呼び出せるように ref 属性を設定しておく -->
  <child :value="message" ref="child1"></child>
  <child :value="message" ref="child2"></child>
  <child :value="message" ref="child3"></child>
</div>

index.js

Vue.component('child', {
    template: "#child",
    props: ["value"],
    data(){
        return { message: this.value };
    },
    methods: {
        // message を更新する
        update(){
            this.message = this.value;
        }
    }
})


new Vue({
    el: '#example',
    data: {
        message: "homu"
    },
    methods: {
        update(){
            // refs を利用して各 child のメソッドを呼び出す
            this.$refs.child1.update();
            this.$refs.child2.update();
            this.$refs.child3.update();
        }
    }
})

https://jsfiddle.net/Lufwscyz/1/

上記のように $refs を利用して child コンポーネントのメソッドを呼び出しています。
今回は結構極端な例だったんですが、フォームをコンポーネント化した際にフォームデータを親から渡す場合にどうするのがいいのかでハマりました。
実際、どうするのがいいんだろうか…。

参照