v-ons-tabbarでrefsを使用して子要素を触る方法【Onsen UI for Vue】

Onsen UI for Vueでは、JavaScriptのフレームワークのVue.jsを使用してネイティブアプリを作成することができます。
「v-ons-tabbar」は、OnsenUIのコンポーネントです。タブメニューから画面遷移するための要素です。

「v-ons-tabbar」でrefsを使用して、子テンプレートの参照は、他の要素と同じような感覚で使用できません。ドキュメントを参照しても適切な解が見当たらなかったため、苦戦しましたが、なんとか実装できました。

実装内容
v-ons-tabbarでrefsを使った例
- parent.vue(親要素)
- child.vue(子要素)
おわりに

実装内容

親から子要素のメソッドを呼び出す。
その際、同期させたいデータを引数にセット。
子要素のメソッドで親データと同期。

という内容です。
propsを使いたいですが、v-ons-tabbar時の動的なデータを
子要素に送る方法が見つけられませんでした。。。

では、ソースを記します。

v-ons-tabbarでrefsを使った例

parent.vue(親要素)

<template>
 <v-ons-page id="app">
   <v-ons-toolbar-button @click="$store.commit('splitter/toggle')">
     <v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
   </v-ons-toolbar-button>
   <v-ons-tabbar
    position="auto"
    :visible="true"
    :tabs="tabs"
    :index.sync="tabIndex"
    ref="el"
  >
  </v-ons-tabbar>
 </v-ons-page>
</template>

<script>
import ChildPage from "child.vue";
export default {
name: "app",
data() {
 return {
  tabIndex: 0,
  tabs: [
   {
    icon: "fa-home",
    label: "子",
    page: ChildPage,
   },
  ],
 test: {
  param: 01,
  },
 };
},
methods: {
  syncEachPages: function (newData) {
   this.$refs.el.$children
    .find(({ PAGE_ID }) => PAGE_ID === 100)
    .childFnc(newData);
   },
  },
watch: {
  test: {
   handler: function (newData) {
    this.syncEachPages(newData);
   },
    deep: true,
  },
 },
};
</script>

v-ons-tabbarで表示する子要素は、タグにrefを使用するだけでは参照することができません。そのため、v-ons-tabbarの子要素をforで回し、子要素のdataにあるPAGE_IDが一致する子要素にデータの参照をできるようにしています。
それが、syncEachPagesのメソッド内で使用しています。

tabsでページを増やすのであれば、追加した子要素のPAGE_IDを割り当て、syncEachPagesに追記する必要があります。

child.vue(子要素)

<template>
 <v-ons-page>
  <div>
    {{test.param}}
  </div>
 </v-ons-page>
</template>
<script>
export default {
   name: "child",
   data() {
   return {
     PAGE_ID: 100,
     test: {
      param: 01,
      },
    };
 },
methods: {
   childFnc: function (obj) {
     this.test= obj;
    },
},
};
</script>

この実装の場合、子要素のPAGE_IDは必須となります。
この親が子に依存する形は、非推奨な設計ですので、あくまで個人向けの小さなプログラムでしか利用しない方が良いかもしれませんね。

また、子要素と親要素のdataを合わせる必要があります。
同じデータの初期値にせよ、複数用意するのはナンセンスでしょう。

v-ons-tabbarで、propsで変数の受け渡し、子要素のメソッド実行など
便利な方法があれば、ご教授お願いします。