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>