Vue.jsで親ViewModelにcomponentをぶら下げてデータを共有

あるページに一つの親ViewModelがあって、そいつが持っているDataModelを親ViewModel配下のcomponentがいじるような設計を試してみた。

構成は以下のような感じ

ViewModelのdataにDataModelを入れてその値をcomponentが読み出す感じ。

ソースは以下

<h1>Component Test</h1>
<div class="main">
    {{title}}
    <my-component-one data="{{$data}}"></my-component-one>
    <my-component-two data="{{$data}}"></my-component-two>
    <button v-on="click:output">
        check
    </button>
</div>
<div class="output">
</div>
<my-component></my-component>

var dataModel = {
    title: "Title",
    one: "component1",
    two: "component2"
};

var MyComponent_one = Vue.extend({
    template: '<p v-on="click:rewrite">{{data.one}}</p>',
    props: ['data'],
    methods:{
        rewrite: function(){
            this.data.one = "rewrite";
        }
    }
});

var MyComponent_two = Vue.extend({
    template: '<p v-on="click:rewrite">{{data.two}}</p>',
    props: ['data'],
    methods:{
        rewrite: function(){
            this.data.two = "rewrite";
        }
    }
});

var mainViewModel = new Vue({
    el: ".main",
    data: dataModel,
    methods: {
        output: function(){
            $('.output').html(this.$data.one + " " + this.$data.two);
        }
    },
    components: {
        "my-component-one": MyComponent_one,
        "my-component-two": MyComponent_two
    }
});

文字列をクリックしたらデータが書き換わる。checkボタンでDataModelの中身を確認すると書き換わっているのがわかる。

この設計がいいかはわからないけど、とりあえずやりたいことはできた。

jsfiddle