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 に沿ったものとなります。 で Prop binding の仕様(構文)が変わっているので注意してください。

See: Release 0.12.1 · yyx990803/vue

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

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 です。


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

             components: {
                 child: {
                     props: ['msg'],
                     template: '<input type="text" v-model="msg">'

1. One-way binding

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

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


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

2. Two-way binding

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

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



3. One-time binding

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

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


わかりづらいですが、今回の場合は画面ロードした時に親が持つ 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