假设我有一个像这样的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>
在这种情况下,路由器在路由匹配时自动绘制路由器视图元素中的组件 .
我的问题是,在这种情况下,我如何将道具传递给组件?
5 回答
并在您的组件中添加prop:
vue-router将匹配组件中的prop
对象模式
这是官方的答案 . link
在路由器中,
在
<Bar />
组件中,遗憾的是,没有解决方案实际上回答了这个问题所以这里是一个来自quora
基本上docs解释不好的部分是
所以在通过路线发送道具时你真正需要的是将它分配给
params
key ex所以完整的例子就是
要直接回答这个问题,在撰写本文时,没有直接的方法来做你想做的事情(除了之前的答案已经显示的那些) . 但即使有,我也不认为这是可取的 .
url是资源的表示,它是驱动状态更改的资源(有时连同其url) . url可以携带一些状态数据,但它仅限于协议,主机,路径和查询字符串 . 任何更复杂的东西必须作为某个资源的一部分携带,作为对请求/导航的响应而生成或生成 .
通过路由器将数据传递给组件类似于后台交易 . 你没有经过适当的渠道给予国家,这意味着该组件获得的状态不是对导航的直接反应,而是由于一些模糊的机制 . 通常状态应该作为对网址变化的反应而改变,而不是通过一些替代逻辑 . 它使您的应用程序更具可预测性 .
通常在数据已经存在的情况下,可能很容易通过路由器传递数据的情况,并且再次查询数据似乎是多余的或浪费的 . 但是,如果您只是将浏览器打开到该URL,那么数据应该从何而来呢?如果推理是不希望它只是插入那个位置,那么也许你只需要一个通向它的路径,也许你只需要一个带有点击事件处理程序的东西,它将加载一个组件并传递数据你想要的方式 .
另一方面,如果您认为您需要路由(因此是路由器)来访问资源,那么这种情况恰好适合于状态管理器(即类似Vuex的东西) .
因此,不是通过路由器将数据传递给组件,而只是为它提供必要的最小值,以便能够向状态管理器查询更多更完整的数据(即只需使用vue-router和vuex)意味着要使用) .
反过来,如果要在获取数据时避免冗余,请在状态管理器中使用一些缓存机制 .