VUE封装完组件后如何将参数传回当前页面

最新推荐文章于 2024-06-17 10:36:49 发布

吃够了没

最新推荐文章于 2024-06-17 10:36:49 发布

阅读量946

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_59761769/article/details/125930543

版权

本文介绍了在Vue.js中，如何在封装组件后将组件内部的数据或事件传递回调用它的父页面，涉及组件间通信的方法和实践技巧。

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

组件页面

//封装一个对话框组件 此函数是点击完确认后将所输入的值传给后台 并清空当前框内的值
open1(formName) {
      this.visible = false;
      // console.log(this.form);
      this.$message({
        message: "餐费退款操作成功",
        type: "success",
      });
      this.tableData[this.index].refundStatus.value = 1;
        //浅拷贝  将此函数抛出 在使用该组件的页面中接收 参数（填入的值）使用解构的方式
        //在使用的页面中接收此函数以及参数 将得到的参数放入需要使用的接口中存入后台
        //this.$emit()作用：子组件向父组件传值
      this.$emit('open1', {...this.form});
      this.$refs['form123'].resetFields();  
    },

或者

open1(formName) {
      this.visible = false;
      // console.log(this.form);
      this.$message({
        message: "餐费退款操作成功",
        type: "success",
      });
      this.tableData[this.index].refundStatus.value = 1;
        //深拷贝 必须配合下面的延缓清空一起使用
      let params = JSON.parse(JSON.stringify(this.