前提

• 非同期通信で親子関係をもったリストをとりたい
• 今回は DataBase – Table みたいな親子関係でDataBaseのnameをキーにTable一覧をとるAPIを叩く想定
• 親(Hoge)のプロパティ(fuga)を子供に受け渡すことのみを命をかけている。

結論

これでうまくいきました。死んだ僕達の願いは後半に書いてます。

var parent = Vue.extend({
    name: 'parent-component',
    template:
        '
' +
            '' +
        ''
    ,
    data: function () {
        return {
            databases: []
        }
    },
    created: function () {
        var that = this;
        axios.get('/database')
            .then(function (response) {
                that.databases = response.databases;
            });
    }
});

var child = Vue.extend({
    name: 'child-component',
    props: ['database'],
    template:
      '
' +
          '{{ table.name }}' +
      '
',
    data: function () {
        return { tables: [] }
    },
    created: function() {
        var that = this;
        axios.get('/database/' + that.database)
            .then(function (response) {
                that.tables = response.tables;
            });
    }
});

Vue.component('parent-component', parent);
Vue.component('child-component', child);

ハマったところ

子コンポーネントへの値の渡し方

あれやこれや試して上記にたどりついた。
数々の死んだ俺たちを以下に残します。

1. 普通に渡してみた

var parent = Vue.extend({
    name: 'parent-component',
    template:
        '
' +
            '' +
        ''
    ,
    ...
});

変更点は以下の行

こうすると、childのcreatedでthis.database したときに{{ database.name }}ってそのまま出て儚くも私は散りました。

2. 子供から親を取得しようとした

var child = Vue.extend({
    name: 'child-component',
    ...
    created: function() {
        var that = this;
        var databases = that.$parent.databases;
        // で？
    }
});

で？

3. なんかエラー出た系

child側のprops 書かないと

[Vue warn]: Attribute "v-bind:XXX" is ignored on component  because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance

って怒られて最後の僕が死んだ結果、うまいこといきましたとさ。

元記事はこちら

「Vue.jsの入れ子のComponentで {{ Hoge.fuga }} を渡したいだけの人生だった。」