Vue.js バージョンによる違いで親dataのscopeができなかったのでメモ。

componentの基本的な使い方。

index.html

<div id="parent">
    <p>メッセージ確認用{{parentMsg}}</p>
    <p v-component="child" v-with="childMsg : parentMsg"></p>
</div>

app.js

new Vue({
    el: '#parent',
    data: {
        parentMsg: 'message'
    },
    components: {
        child: {
            template: 'メッセージ入力用<input v-model="childMsg">'
        }
    }
});

ブラウザで確認すると、
メッセージ確認用エリアと、
メッセージ入力用エリアが表示されて、
inputの内容を書き換えたら確認用のほうでも表示が変わるだけ。

ハマった原因

0.11.4で上記アプリを動かそうとすると動かない。
0.11.5では動く。
ついでに、0.10系でも動く。

どうするのがベストか。

inherit: true
というオプションもあるみたいだけど、
公式サイトでは、$addChildと一緒に使っているし、
今回の内容とは関係なさそう。

とりあえず、0.11.5使えば動くので、よしとしよう。