将道具传递给Vue-router实例化的Vue.js组件

vue.js Vue.js

梅乐

2020-03-11

假设我有一个Vue.js组件，如下所示：

var Bar = Vue.extend({
    props: ['my-props'],
    template: '<p>This is bar!</p>'
});

我想在vue-router中的某些路由匹配时使用它：

router.map({
    '/bar': {
        component: Bar
    }
});

通常，为了将“ myProps”传递给组件，我将执行以下操作：

Vue.component('my-bar', Bar);

并在html中：

<my-bar my-props="hello!"></my-bar>

在这种情况下，当路由匹配时，路由器会自动在router-view元素中绘制组件。

我的问题是，在这种情况下，如何将道具传递给组件？

第663篇《将道具传递给Vue-router实例化的Vue.js组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

Pro西门 2020.03.11

采用：

this.$route.MY_PROP

获得路线道具

猴子Itachi 2020.03.11

<router-view :some-value-to-pass="localValue"></router-view>

并在组件中添加prop：

props: {
      someValueToPass: String
    },

vue-router将与组件中的prop匹配

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android