Question

我在理解如何将道具传递给页面组件方面遇到了问题

使用Vue我可以做到

Vue.component("name", {props: ["example"]});

并像这样使用它 <name v-bind:example="parentData">{{example}}</name>

这很有效但很好但是在framework7-vue中每个页面都是一个组件，它们在运行时被切换，所以我没有<pageElement></pageElement>我可以设置任何东西，所以使用{{页面/组件模板中的1}}或{{example}}不起作用

官方文档似乎没有涵盖这个主题 https://framework7.io/vue/navigation-router.html

Answer 1

它似乎不起作用，但是您可以在组件中创建一个新的data属性，然后侦听所创建的钩子，然后将该属性值设置为prop值。

Vue.component("name", {
              props: ["example"], 
              data() {return {myExample: null}}, 
              template: "<some-tag>{{myEaxmple}}</some-tag>",
              created() {this.myEaxmple = this.example}
    });

Answer 2

您可以使用以下道具定义任何页面的路线：

{
    path: '/About/:example',
    component: AboutPage,
}

我假设您已经为该页面定义了道具：

name: 'AboutPage',
props: ['example']

然后在该页面的任何链接中传递道具。例如：

<f7-list-item :link="'/About/' + PROP_VALUE">...</f7-list-item>

内页在模板中使用{{example}}或在代码中使用this.example。

在framework7-vue

2 个答案: