vue父子页面相互传输数据

背景：项目中用到vue，在一个页面弹出另一个页面，总共需要弹出两个页面，一个页面需要给父页面传数据，另一个需要父页面给他传数据，下面是解决方法。
1，子页面给父页面传数据
1.1，父页面配置

//弹出框
<up-page ref="upPage" @setdata="setdata">
</up-page>
//其中，标签名为子页面配置的名字，@setData中的名字是子页面向父页面传数据时调用的方法
//导入子页面
import UpPage from "@/xxx/xxx/UpPage"
export default {
	components:{
      UpPage,//子页面调用的名称，和上面的ref的名称一样
	},

	methods: {
		//显示弹出框
		handleUpPage: function (row) {
		this.$refs.upPage.setDialogVisible(true)
		},
		//接收子页面参数 data可用json传多个参数
	    setdata: function(data) {
	      this.xxx= data.xxx;
	    },
	}
}

1.2，子页面配置

<el-dialog :visible.sync="upPageDialogVisible" >
xxx
</el-dialog>
upPageDialogVisible 为true显示弹出框
export default {
    name: 'UpPage',	//父页面调用时用的名字
    data() {
      return {
      upPageDialogVisible:false
	}
	methods: {
		// 设置可见性 父页面可调用
      setDialogVisible: function (visible) {
        this.upPageDialogVisible= visible
      },
	//向父页面传数据 $emit向父页面传数据的方法
      makesureAndClose: function() {
        let data = {pageData: this.pageData, pageData2: this.pageData2};
        const vm = this;
        vm.$emit('setdata', data);
      },
  }
}

2.父页面向子页面传数据

//配置弹出框	data中为向子页面传的数据
<up-page2 ref="upPage2" :data="data">
        </up-page2>     
//导入子页面
import UpPage2 from "@/xxx/xxx/UpPage2" 
//配置数据
export default {
	components:{
      UpPage2 
	},
    // 显示弹窗
    handleSelectedBuildingPage: function (row) {
     this.$refs.upPage2.setDialogVisible2(true)
    },

2.2子页面配置

<el-dialog :visible.sync="dialogVisible2"></el-dialog>
//数据配置
export default {
    name: 'ShowSelectedUserBuildingPage',
    props: ['data'],//定义父页面传参
   	data() {
      return {
      dialogVisible2:false,
      pageData: [],
    }

	// 设置可见性
	setUserBuildingDialogVisible: function (visible) {
	  this.dialogVisible2 = visible;
	  //设置数据
	  const vm = this;
	  this.pageData = vm.$props.data;//$props获取父页面传参
	},
	//也可以配置弹出框时不配置需要传的数据，在子页面加上设置数据的方法，父页面调用子页面方法传入数据
	//子页面方法
	//初始化数据
	setPageDatas: function(var1, var2) {
	  this.pageData = var1;
	  this.pageData2 = var2;
	},
	//父页面赋值方法
	// 显示指定楼盘弹窗
	handleBuildingPage: function (row) {
		//设置数据
		this.$refs.showUserBuildingPage.setPageDatas(this.canUseRequestFundsBuildingInfos, this.requestFundsBuildingInfos);
	 	this.$refs.showUserBuildingPage.setUserBuildingDialogVisible(true);
	},
	//这种方法有个问题，就是子页面的对象和父页面的对象会同步刷新，可以先将父页面的对象转为字符串再转对象然后赋值子页面对象
	setPageDatas: function(var1, var2) {
	  this.pageData = JSON.parse(JSON.stringify(var1));
	  this.pageData2 = JSON.parse(JSON.stringify(var2));
	},

3、另一种子页面调用父页面的方法
子页面

export default {
	inject:['setParentData'],//父页面的方法
}
function: test() {
	let data = '';
	this.setParentData(data);
}

父页面

export default {
	provide(){
      return{
          setParentData: this.setParentData,//对应子页面注入的方法名称
      }
    },
}
function: setParentData(data) {
	xxx
}