props功能:让组件接受外部传过来的数据
(1):传递数据:<Demo name="xxx"/>
(2):接受数据:
第一种:(只接收):props: ['name']
第二种:(限制类型):props:{ name:Number }
第三种:(限制类型,限制必要性,指定默认值):
props: {
name: {
type: String,
required: true,
default: 'hhh'
}
}
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,
若业务需求确实需要修改,那么请复制props的内容在data中声明一份,然后去修改data
中的数据。
在URL中props的传参
第一种写法:props值为对象,该对象中所有的key-value的组合
最终都会通过props传给Wea组件
props: {id:123456}
第二种写法:props值为布尔值 true,则把路由收到的所有params
参数通过props传过去
第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传过去
{
path: '/wea/:id',
name: 'Wea',
component: Wea,
props:function(route){
console.log(route);
return {
id:route.params.id, //params 指的是 / 中的参数
liangzai:route.query.liangzai // query 指的是 ? 后的参数
}
},
},
或写成
props(route){
return {
id:route.params.id,
liangzai:route.query.liangzai
}
},