Vueコンポーネントの拡張機能

VueがアプリをマウントしてFramework7を初期化すると、Framework7の初期化されたインスタンスや、framework7-vueパッケージからインポートできるその他の便利なプロパティにアクセスできるようになります。

f7ready

これは、Framework7が完全に初期化されたときに実行されるコールバック関数です。コンポーネントの中で、Framework7のAPIにアクセスする必要があり、準備ができていることを確認するのに便利です。そのため、Framework7に関連するすべてのロジックをこのコールバックに入れても安全です。引数として、初期化されたFramework7のインスタンスを受け取ります。例えば、以下のようになります。

<template>
  ...
</template>
<script>
  import { f7ready } from 'framework7-vue';

  export default {
    ...
    mounted() {
      f7ready((f7) => {
        f7.dialog.alert('Component mounted');
      });
    },
  };
</script>

f7

Main Framework7の初期化されたインスタンス。これにより、Framework7のあらゆるAPIを使用することができます。

もし、Framework7のインスタンスにアクセスしたときに、すでに初期化されていることが確認できれば、それを直接インポートして使用することができます。

<template>
  ...
</template>
<script>
  import { f7 } from 'framework7-vue';

  export default {
    ...
    methods: {
      doSomething() {
        f7.dialog.alert('Hello world');
      }
    },
  };
</script>

theme

これは、現在使用されているテーマ（iOS、MD、またはAurora）に関する情報を持つ、ブール値のプロパティを持つオブジェクトです：theme.ios、theme.md、theme.aurora。

<template>
  ...
</template>
<script>
  import { theme } from 'framework7-vue';

  export default {
    ...
    mounted() {
      if (theme.ios) {
        console.log('Currently active theme is iOS-theme')
      }
    },
  };
</script>

f7route と f7router です。

ルーターのインスタンスと現在のルートは、ルーターコンポーネントにpropsを介して渡されます。

このプロパティは、ルーターで読み込まれるコンポーネント（ページ、ルーティング可能なモーダル、ルーティング可能なタブなど）でのみ利用できます。もし「より深い」子コンポーネントでこのプロパティにアクセスする必要があるなら、propsを使ってそれを渡す必要があります。

<template>
  ...
</template>
<script>
  export default {
    // コンポーネントが受け取れるようにpropsを定義します。
    props: {
      f7route: Object,
      f7router: Object,
    },
    ...
    mounted() {
      console.log(this.f7route.url)
    },
    methods: {
      navigate() {
        this.f7router.navigate('/some-page/')
      }
    }
  };
</script>

f7route は現在のルートで、次のようなプロパティを持つオブジェクトです。

• url - ルートのURL
• path - ルートのパス
• query - ルートのクエリを持つオブジェクトです。もしURLが /page/?id=5&foo=bar であれば、次のようなオブジェクトが含まれます {id: '5', foo: 'bar'} 。
• params - ルートのパラメータです。もし、/page/user/:userId/post/:postId/というパスでマッチングしたルートがあり、ページのURLが/page/user/55/post/12/であれば、以下のようなオブジェクトになります {userId: '55', postId: '12'}
• name - ルート名
• hash - ルートのURLハッシュ
• route - 利用可能なルートからマッチするルートを持つオブジェクト