［Onsen UI + Vue.js］v-ons-tabbarでtabにpropsを通じてデータを渡したい

###前提・実現したいこと
公式ページにあった下記コマンドで環境を構築し、＂props＂の部分だけ追加で記述しています。
※見やすくするために一部のコードを削っています

$ monaca create helloworld # Choose Vue 2 template

該当部分のコードは下記で、親ページの「data内tabのprops」で定義した

test:"this is a test."

を、子タブへ渡して表示したいのですが、反映されません。
どこか間違っているのか、あるいは別の方法があればご教示頂きたいです。

###該当のソースコード（親ページ）

<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">{{ title }}</div>
    </v-ons-toolbar>

    <v-ons-tabbar position="auto" :tabs="tabs" :visible="true" :index.sync="activeIndex">
    </v-ons-tabbar>
  </v-ons-page>
</template>

<script>
  import settingsPage from 'Settings';
  import homePage from 'Home';

  export default {
    data() {
      return {
        activeIndex: 0,
        tabs: [
	  {
	    icon: this.md() ? null : 'ion-home',
	    label: 'Home',
	    page: homePage,
        props:{
        test:"this is a test."
        }
	  },
	  {
	    icon: this.md() ? null : 'ion-ios-bell',
	    label: 'News',
	    page: newsPage,
	    badge: 7
	  },
        ]
      };
    },
    methods: {
      md() {
        return this.$ons.platform.isAndroid();
      }
    },
    computed: {
      title() {
        return this.tabs[this.activeIndex].label;
      }
    },
    components: { homePage, settingsPage, newsPage }
  }
</script>

###該当のソースコード（子ページ）

<template>
<v-ons-page>
  <p style="text-align: center">
    testComment:{{test}}
  </p>
</v-ons-page>
</template>
<script>
export default {
  name: 'home',
  props: ['test'],
}
</script>

行動規範の内容に同意します

回答2件

Onsen UI 開発チームの者です。

この問題は先ほどリリースした vue-onsenui 2.0.0-rc.0 にて改善されました。
https://github.com/OnsenUI/OnsenUI/blob/master/bindings/vue/CHANGELOG.md#200-rc0

2.0.0-rc.0 以降は以下のような書き方が可能になります。

tabs: [
  {
    label: 'Home',
    icon: 'ion-ios-home-outline',
    page: home,
    props: {
      test: 'This is a page prop.'
    },
  },
  {
    label: 'News',
    icon: 'ion-ios-bell',
    badge: 7,
    page: news
  },
  {
    label: 'Settings',
    icon: 'fa-cogs',
    page: settings
  }
]

https://github.com/OnsenUI/OnsenUI/blob/398902325230da6aee49e7a44b27a60164a48db8/bindings/vue/examples/components/Tabbar.vue#L46-L66

よろしくお願いいたします。

投稿2017/06/14 13:44