vue传参的三种方式

1.在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

方案一:

实现:

在组件two中点击时会将点击的城市名传递到city组件中

路由配置如下


city组件以及接收传来的参数的方式


效果

点击聊城,在跳转到city组件之后,将聊城这个参数也传递了过来。

方案二:

实现:

在组件main中点击对应的季节将该参数传递到跳转的MainD组件中

组件MainD接参

效果:

点击夏天跳转页面之后,在MainD页面显示夏天

方案三:平常最常用的一种方式


实现:

在组件list中向listDetail组件中传递对应的多个参数

路由配置


组件listDetail中以及接收参数

相当于在list组件中点击列表,在listDetail组件中,显示点击的列表项的详情

效果:

以上便是vue传参常见的三种方式

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,027评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,786评论 25 709
  • 湄行清水秀, 洲共落阳霏。 岛陆环观望, 游辞暮夜归。 注:平起,平水韵
    芝初阅读 592评论 12 22
  • 作者:高铭《天才在左,疯子在右》 我:“我看到你在病房墙壁画的了。” 他:“嗯。” 我:“别的病患都被吓坏了。” ...
    sherrydd阅读 512评论 0 0
  • 回家的时候,武汉细雨如丝,回到钟祥,温暖的阳光却漫过我路过的每一寸土地。我说:因为我的到来,这一天,成了一个美丽的...
    三不知一阅读 572评论 8 8