vue:传参的三种方式以及props的三种写法以及传参的注意事项

本文详细介绍了在Vue.js中通过三种方式传递参数:字符串、模板和对象方式。强调了params和query的区别,以及在组件路由配置中的注意事项。同时,还提及了路由组件props的三种设置方式,包括布尔值、对象和函数方法。对于props的接收,文章提到了如何从$route对象中获取参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue:传参的三种方式

  1. 字符串: this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase())
  2. 模板: /search/${this.keyword}?k=+${this.keyword.toUpperCase()}
  3. 对象:this.$router.push({name: "search",params: {keyword: this.keyword, }, query: {k: this.keyword.toUpperCase(),},})
    注意
    - params参数需要在组件路由配置中添加占位符path: '/search/:keyword',
    - 对象传参需要在组件路由配置中添加name属性name: 'search',
    - //keyword?表示此字段可传可不传 path: '/search/:keyword?',
    - path不可以和params一起使用,必须使用name配合
    - //不可以使空串,使用undefined // params: { keyword: '' || undefined },
    - 路由组件props三种写法:
    1. 布尔值,只能有params参数:props:true
    2. 对象写法:props:{a:1,b:2}
    3. 函数写法:props:($route)=>({keyword:$route.params.keyword,k:$route.query.k})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值