vue页面跳转和传值

最新推荐文章于 2023-06-23 14:00:00 发布

离阳光更近一点

最新推荐文章于 2023-06-23 14:00:00 发布

阅读量456

点赞数

分类专栏： # vue # elementui 文章标签： vue elment-ui

本文链接：https://blog.csdn.net/kawayiyy123/article/details/110670816

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

elementui

4 篇文章 0 订阅

订阅专栏

vue页面跳转和传值

1.index.vue传值

如下图，我有两个vue,一个index.vue,一个proc-info.vue,下面将会index.vue中引入proc-info.vue
在这里插入图片描述

在index.vue 的script中引入

 import procInfo from './proc-info.vue';

然后在 exprot default中声明
在这里插入图片描述

  export default {
    name: "Invoice",
    components: {
       UploadImage,
       procInfo
    },
     data() {
      return {.....}
         }
      }

然后在一个dialog中调用它,invoiceUuid是我向proc-info.vue中传的值
在这里插入图片描述

    <el-dialog :visible.sync="InvoiceDetailDialog" width="1000px" :title="title">
      <procInfo :invoiceUuid="invoiceUuid"></procInfo>
    </el-dialog>

InvoiceDetailDialog这个是我在return中声明过一次
在这里插入图片描述

在方法中调用并把值传过去

      handleInvoiceDetail(row){
       const {uuid} = row;
       this.invoiceUuid = uuid;
       this.InvoiceDetailDialog = true;
      },

2.proc-info.vue接受值

传值：在exprot default加入对应数据
在这里插入图片描述

    props: {
    invoiceUuid: {
      type: String,
      required: true,
      default: ''
    }
  },

收值：放入查询条件中，进入页面，找到method，接受传来的值并且放入查询条件中

    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        const routerParams = this.invoiceUuid;
        // 将数据放在当前组件的数据内
         this.queryParams.invoiceUuid = routerParams;
        listDetail(this.queryParams).then(response => {
          this.detailList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

页面效果：
在这里插入图片描述