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

Vue

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

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

実装内容

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

という内容です。
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で変数の受け渡し、子要素のメソッド実行など
便利な方法があれば、ご教授お願いします。

おわりに

今回は、v-ons-tabbarのデータ受け渡しについて記しました。
Vueでネイティブアプリを作成できるのは非常に新鮮でした。

もし、データ処理のあるアプリを実装するのであれば、別途APIを利用してデータの受け渡しをする必要がありますが、最近では一般的な実装方法です。

VueのOnsenUIは、公式ドキュメント以外に、参考文献が多くありません。
そのため扱いづらく感じるかもしれません。ある程度構文を覚えたならば、Webアプリと同等に素早く実装することができますね。

iOSアプリのリリースは、developer登録が必要なので年1万円程度かかります。
お金を稼ぐ目的だとしたら、個人だとかなり厳しいですね。採算が合うかどうか…

 

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました