Vue 组件扩展

AfterVue挂载应用并初始化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

主 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 ）的信息：theme.ios, theme.md.

<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

路由器实例以及当前路由通过属性传递给路由器组件：

这些属性仅适用于使用路由加载的组件（例如页面、可路由模态框、可路由标签）。如果你需要在“更深”的子组件中访问这些属性，那么你需要使用属性将其向下传递。

<template>
  ...
</template>
<script>
  export default {
    // define props so the component will receive it
    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- 来自可用路线的匹配路线对象