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

Vue.js 0.12.1 で使える Prop Binding Types

More than 5 years have passed since last update.

Vue.js 0.12.0 "Dragon Ball" リリースおめでとうございます :tada:

そんなわけで Vue.js 0.12.0 から登場した Prop Binding について、ざっくりと見ていこうと思います。どこか勘違いしてるところあったらご指摘お待ちしております。

注意 :exclamation:

本記事はタイトルの通り 0.12.1 に沿ったものとなります。0.12.00.12.1 で Prop binding の仕様(構文)が変わっているので注意してください。

See: Release 0.12.1 · yyx990803/vue

そもそも Vue.js でいう Prop とは

http://vuejs.org/guide/components.html#Passing_Data_with_Props

By default, components have isolated scope. This means you cannot reference parent data in a child component’s template. In order to pass data to child components with isolated scope, we need to use props.

雑に言うと、つまりコンポーネント間で値をやりとりする(正確にはプロパティのスコープをコンポーネント間に広げる)ための仕組みです。

Prop Binding Types

コンポーネント間でスコープのやりとりをできるようになると

  • 「親」が持つプロパティを「子」からも変更したい(いわゆる Two-way binding)
  • 「子」はあくまでも参照のみ。更新は「親」しかできない(いわゆる One-way binding)

みたいなことを考えるようになります。これを制御するのが、0.12.0 から登場した Prop Binding Types です。

こんな感じの画面があるとします。

<html>
    <head>
        <meta charset="UTF-8">
        <script src="vue-0.12.1/dist/vue.min.js"></script>
    </head>
    <body>
        <div id="demo">
            Parent: <input type="text" v-model="msg">
            <br>
            Child: <child msg="{{msg}}"></child> <!-- ここが変化します -->
        </div>
        <script>
         var demo = new Vue({
             el: '#demo',
             data: {
                 msg: 'Hello, World!'
             },

             components: {
                 child: {
                     props: ['msg'],
                     template: '<input type="text" v-model="msg">'
                 }
             }
         });
        </script>
    </body>
</html>

1. One-way binding

<child msg="{{msg}}"></child>

Prop のデフォルトの動きは One-way binding になります。

vuejs-binding-1.gif

親が持つ msg に対する変更は子にも通知されますが、子が持つ msg への変更は親には通知されません。

2. Two-way binding

<child msg="{{@ msg}}"></child>

Two-way binding にするには @ を追加します。

vuejs-binding-2.gif

親が変更したら子へ、子が変更したら親へ通知されます。

3. One-time binding

<child msg="{{* msg}}"></child>

親の変更が子へ 一度だけ 通知されます。

vuejs-binding-3.gif

わかりづらいですが、今回の場合は画面ロードした時に親が持つ msg が子に渡されたタイミングで One-time binding の効果により、以後親子ともに変更が反映されません。

おまけ

0.12.0 の時は 子の変更だけを親に通知する みたいな Oneway up binding とかもあったらしいですが、0.12.1 ですぐ削除されちゃいましたね。

まとめ

コンポーネント間の値の受け渡ししたいけどグローバル変数にするのはなー、みたいな時には便利そうですね?多分。

参考資料

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