<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
如果某个route上写了props: true属性，那么对应的路由组件上就会多出来一个属性
{
path: ‘/demo/:a‘,
component: demo,
props: true
}
相当于
<demo v-bind="$route.params"></demo>
又相当于
<demo :id="$route.params.id"></demo>
如果给路由对象上添加props等于true则对应的路由组件里就可以接收props
props: {
params参数: 数据类型
}
如果路由对象上的props是对象，则会按照原样添加给路由组件
{
path: ‘/‘,
component: demo,
props: {a: 1, b: 2, c: 3}
}
相当于
<demo v-bind="{a: 1, b: 2, c: 3}"></demo>
又相当于
<demo :a="1" :b="2" :c="3"></demo>
所以可以在demo组件中设置prop接收a b c三个值
1 如果props是true
则将route.params添加到组件上
<com v-bind="route.params"></com>
2 如果props是对象
则将这个对象原样添加到组件上
<com v-bind="props"></com>
3 如过props是函数 （一般返回值为对象）
则将这个函数的返回值添加到组件上
<com v-bind="props返回值"></com>
<com v-bind="{key:value}"></com>
<com :key="value"></com>
最终就可以在组件中设置props用于接收这些属性值
这个不是新的功能，而是为了解耦提出的新的写法
-->
<div id="app">
<router-view></router-view>
</div>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
<script>
const com = {
template: `
<div>组件</div>
`,
props: {
id: String,
// a: Number,
// b: Number,
// c: Number,
// query: Object
a: String,
b: String,
c: String,
},
created () {
this.getData()
},
methods: {
getData () {
// console.log(this.$route.params.id)
console.log(this.id)
console.log(this.a, this.b, this.c)
console.log(this.query)
}
}
}
const router = new VueRouter({
routes: [
{
path: ‘/:id‘,
component: com,
// props: true
/* props: {
a: 1,
b: 2,
c: 3
} */
props: (route) => {
return route.query
}
}
]
})
const app = new Vue({
el: ‘#app‘,
router
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/bao2333/p/10278917.html
时间： 2024-11-10 11:28:32