赞助商成为赞助商

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

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

路由器实例和当前路由通过 props 传递给路由器组件

这些属性仅适用于通过路由加载的组件（例如页面、可路由模式窗口、可路由标签）。如果你需要在"更深入"的子组件中访问此属性，则需要使用 props 将其向下传递。

<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是当前路由，具有以下属性的对象

完善此文档
在此页面