时间戳

首页 > 解决方案 > 在 VueJS 中使用“道具”的正确方法

javascript - 在 VueJS 中使用“道具”的正确方法

问题描述

我第一次使用 VueJS 创建一个新项目，并尝试在我的所有页面上使用工具栏。但我想让工具栏中的标题动态显示。我尝试使用道具，但我使用它的方式一定是错误的。检查下面的示例：

在我的 index.html 中：

<div id="app" v-cloak>
    <v-app>
        <spa-toolbar :title="title"></spa-toolbar>
        <router-view></router-view>
    </v-app>
</div>

<script>
    Vue.use(VueRouter);
    Vue.use(VeeValidate);
    Vue.config.devtools = true;

    const routes = [
        {
            path: '/',
            component: spaLogin,
            props: {title: 'Connexion'}
        },
        {
            path: '/parametres',
            name : 'parametres',
            component: spaParametres,
            props: {title: 'Paramètres'}
        },
    ];

    let router = new VueRouter({
        hashbang: false,
        routes
    });

    router.beforeEach((to, from, next) => {
        next();
    });


    var app = new Vue({
        el: '#app',
        watch: {},
        data: {
            title: 'Connexion',
        },
        router
    });
</script>

toolbar.vue.js（带有“道具：[”标题“]）：

 <v-toolbar-title class="white--text">{{title}}</v-toolbar-title>

在另一个页面“parametres.vue.js”中，我使用了道具[“title”]，但标题的值始终是“Connexion”，这是我在 index.html 中的主应用程序中定义的值。

如何使这个值动态化？认为通过路由器将其传递会很棒...

谢谢 ！

标签： javascriptvue.jsvue-componentvue-router

解决方案

您正在将属性title从v-app组件传递给spa-toolbar组件。然后，您在路由上设置一个属性，该属性也称为title.

这两者没有任何关系。title路由中的prop 也传递给 中的组件router-view，即spaLogin和spaParametre。

所以我认为更好的方法是meta在路线上定义一个字段：

<div id="app" v-cloak>
    <v-app>
        <spa-toolbar :title="(($route.matched[0] || {}).meta || {}).title"></spa-toolbar>
        <router-view></router-view>
    </v-app>
</div>

<script>
Vue.use(VueRouter);
Vue.use(VeeValidate);
Vue.config.devtools = true;

const routes = [
    {
        path: '/',
        component: spaLogin,
        meta: {title: 'Connexion'}
    },
    {
        path: '/parametres',
        name : 'parametres',
        component: spaParametres,
        meta: {title: 'Paramètres'}
    },
];

let router = new VueRouter({
    hashbang: false,
    routes
});

    var app = new Vue({
        el: '#app',
        data: {},
        router
    });
</script>

推荐阅读