VUE从一个页面传值到另一个页面

最新推荐文章于 2025-05-12 23:03:06 发布

呆子小木心

最新推荐文章于 2025-05-12 23:03:06 发布

阅读量2.2w

点赞数 16

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/cc6_66/article/details/109171622

vue 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了两种在VUE中实现页面间数据传递的方法：一是利用路由进行参数传递；二是通过组件之间的父子关系来传递数据。

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

VUE从一个页面传值到另一个页面

方法一：通过路由进行数据的传参：
前提：自己已经定义了路由，并可以实现页面的跳转

//自己声明一个方法
employeesdetails(id){
      this.$router.push(
      {
      //添加需要传值到那个页面的路径
      path:'/employeesdetails/employeesdetails', 
      //携带需要传递的参数
      query:{id:id}
      })
    },

在另一个页面接受数据

var id = this.$route,query.id;
console.log(id);

方法二：组件传值：
1，在当前页面的部分代码
html部分：

<!--在父组件的子组件使用标签上，通过自定义属性传递变量-->
<ordertable ref="msg"></ordertable>

js部分：

//导入组件
import ordertable from './table.vue'

export default {
  data() {
    return {
    }
  },
  //定义组件
  components:{
    ordertable,
  },
  
  mounted(){
  //父组件调用到子组件的方法
     this.$refs.msg[0].findAllorder(this.activeName);
  },
  methods: {
     handleClick(tab, event) {
        console.log(tab, event);
        // console.log(this.$refs.msg[tab.index],'---==');
        this.$refs.msg[tab.index].findAllorder(this.activeName);
      }
  }
}

2，在另一个页面中的部分代码：
js部分：

//直接接受参数
findAllorder(name){
    console.log(name);
}