Vue普通组件与路由组件传参
2019-03-24 本文已影响0人
fam2008ily
路由组件传参：3种模式：布尔模式、对象模式、函数模式
对象模式主要用于前期开发时的测试
通过普通组件传参：props传递参数
<body>
<div id="app">
<list a="2"></list>
</div>
</body>
<script>
var list={
props:["a"],
template:`
<h1>{{a}}</h1>
`
}
Vue.component("list",list)
var app=new Vue({
el:"#app",
});
</script>
通过路由组件跳转传参
分为两种，参数由路由对象中获取，组件实例中通过$route访问路由信息，即路由携带参数
？后面加参数，写为？键=值&键=值，，，组件实例中通过 $route.query访问
：后面跟键，如:path:"/:a/:b"，值直接在路径 / 后加，和：后面的键一一对应，组件实例中通过 $route.params访问
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<script>
var index={
template:`
<h1>{{$route.params.title}}</h1>
`
var app=new Vue({
el:"#app",
router:new VueRouter({
routes:[{
path:"/:title",
component:index
}]
})
})
</script>
布尔模式
由于普通组件和路由组件传参的形式不同，body与JavaScript中均有较大变动，现在有一种方法，在路由配置项route中添加props:true,会把params中的键值对以props的形式传入组件中，使普通组件当做路由组件使用
注意：此种方法只适合于：传参
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<script>
// 组件配置项
var list={
props:["a"],
template:`
<h1>{{a}}</h1>
`
}
Vue.component("list",list)
var app=new Vue({
el:"#app",
router:new VueRouter({
routes:[{
path:"/:a",
// path中使用的属性名要与props中的属性名相对应
component:list,
props:true
//意味着会把params:{a:123}
// 123为后来在路径中传进去的值
// 相当于在渲染router-view时，真正写的是<list a="123"></list>
}]
})
});
</script>
函数模式
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<script>
// 组件配置项
var list={
props:["a"],
template:`
<h1>{{a}}</h1>
`
}
Vue.component("list",list)
var app=new Vue({
el:"#app",
router:new VueRouter({
routes:[{
path:"/",
component:list,
//区别之处：props是一个函数，$route作为形参，将传进去的参数return出去
//此时传参，？和：两种方式都可以
//:传参 ，如path:"/:a/:b",
props:($route)=>{
return {
//此处可用...展开运算符，...$route.query，意思是将query里面的键值对定义为props传进去
a:$route.query.a
}
}
}]
})
});
</script>
