vue 单页面组件的2种传值方式

最新推荐文章于 2024-05-24 15:48:22 发布

杜俊锋

最新推荐文章于 2024-05-24 15:48:22 发布

阅读量2.1k

点赞数

分类专栏： vuejs 文章标签： Vuejs vue平行组件的传值

本文链接：https://blog.csdn.net/weixin_40369827/article/details/78552504

版权

本文介绍了Vue.js中实现单页面组件间传递值的两种方法：一是通过路由参数(params)进行传值，使用`this.$route.params`获取传入的值；二是利用`this.$router.push`结合查询字符串(query)来传递数据，接收端同样通过`this.$route.query`来获取。

摘要由CSDN通过智能技术生成

一、路由传值（params:{id:a}）

需要传值的组件：

<template>
<div>
<router-link :to="{ name: 'twdetails', params: { id: a }}" >

</router-link>
</div>
</template>

<script type="text/ecmascript-6">
export default {
data(){
return{
a:1
}
}
}
</script>

接受值的组件：
<script>
export default {

data(){
return{
id:0
}
},
mounted(){
console.log('id: ' + this.$route.params.id);
this.id=this.$route.params.id

}

}

</script>

this.$route.params用这个得到值

二、this.$router.push("/xxxx?id="+idx)

接收组件xxxx this.$route.query