Framework7-Vue页面组件Props传递问题咨询

我之前也碰到过这个困扰！在Framework7-Vue里，页面都是通过路由动态切换的，确实没法像普通Vue组件那样直接通过标签绑定props。不过别担心，有几种实用的方法可以解决这个问题：

1. 路由参数传递基础数据 #

这是最直接的方式，适合传递字符串、数字这类简单数据。跳转页面时把数据附在路由参数里，页面组件通过$f7route.params就能拿到。

比如跳转的代码：

// 在父页面触发跳转
this.$f7router.navigate('/user-profile/?userId=100&userName=John')

然后在目标页面组件里，不管是模板还是脚本都能直接用：

<template>
  <f7-page>
    <p>用户ID: {{ $f7route.params.userId }}</p>
    <p>用户名: {{ $f7route.params.userName }}</p>
  </f7-page>
</template>

<script>
export default {
  mounted() {
    console.log('用户ID', this.$f7route.params.userId);
  }
}
</script>

2. 利用路由的props配置映射参数 #

Framework7-Vue支持Vue路由的props配置，可以把路由参数自动映射成页面组件的props，这样就能像普通Vue组件一样使用props了。

方式一：直接开启props #

定义路由时设置props: true，路由参数会自动作为props传入组件：

// 路由配置
{
  path: '/user-profile/:userId/:userName',
  component: UserProfilePage,
  props: true
}

然后在页面组件里定义props：

<script>
export default {
  props: ['userId', 'userName'],
  mounted() {
    console.log('用户名', this.userName);
  }
}
</script>

方式二：自定义props映射函数 #

如果需要对参数做处理，或者传递非路由参数的数据，可以用函数返回props：

// 路由配置
{
  path: '/user-profile',
  component: UserProfilePage,
  props: (route) => ({
    userId: parseInt(route.params.userId), // 把字符串转成数字
    extraData: { role: 'admin' } // 额外传递自定义数据
  })
}

3. 用Vuex管理共享数据 #

如果数据需要在多个页面共享，或者数据结构比较复杂，直接用Vuex来管理是最稳妥的方案。把数据存在Vuex的state里，任何页面组件都能通过$store访问。

比如在Vuex的store里定义：

const store = new Vuex.Store({
  state: {
    currentUser: null
  },
  mutations: {
    setCurrentUser(state, user) {
      state.currentUser = user;
    }
  }
})

父页面更新state：

this.$store.commit('setCurrentUser', { id: 100, name: 'John' });
this.$f7router.navigate('/user-profile/');

目标页面组件获取数据：

<template>
  <f7-page>
    <p>用户名: {{ $store.state.currentUser.name }}</p>
  </f7-page>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['currentUser'])
  }
}
</script>

4. 临时数据用Framework7全局存储 #

如果只是临时传递数据，不想用Vuex这么重的方案，可以用Framework7自带的$f7store来存临时数据：

父页面存数据：

this.$f7store.set('tempUser', { id: 100, name: 'John' });
this.$f7router.navigate('/user-profile/');

目标页面取数据，记得用完清理避免占用内存：

<script>
export default {
  mounted() {
    const user = this.$f7store.get('tempUser');
    this.userData = user;
    this.$f7store.delete('tempUser'); // 用完删除
  }
}
</script>

总结一下：简单数据用路由参数或路由props，跨页面共享数据用Vuex，临时数据用$f7store，根据你的场景选最合适的方法就好。

内容的提问来源于stack exchange，提问作者sdrubish