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
}
### Vue2 页面间传值方法 #### 路由传参 利用 Vue Router 的参数功能可以在页面之间传递简单的字符串或者数值类型的参数。这种方式适合用于少量数据的传输。 ```javascript // 定义路由配置时设置动态路径参数 :id const routes = [ { path: '/user/:id', component: User } ] // 导航到带参数的目标页面 this.$router.push({ name: 'user', params: { id: userId } }) ``` 当目标组件被渲染时,可以通过 `this.$route.params` 获取这些参数[^1]。 #### Vuex 状态管理 对于复杂应用中的全局状态共享问题,推荐使用 Vuex 来集中管理和维护应用程序的状态。任何地方都可以访问并修改存储于 store 中的数据,从而实现了跨页面通信的目的。 ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0, }, mutations: { increment (state) { state.count++ } } }) ``` 其他组件读取或更改此计数器只需调用相应的 getter 和 action 即可完成操作。 #### Props 属性与自定义事件 父级向级传递属性(props),而级则可通过触发自定义事件来通知父级某些事情发生。这种模式适用于有层次关系的父子组件之间的通讯。 ```html <!-- ParentComponent.vue --> <template> <ChildComponent v-bind:message="parentMessage" @childEvent="handleChildEvent"/> </template> <script> export default { data () { return { parentMessage: '' } }, methods: { handleChildEvent(value){ console.log('Received message:', value); } } } </script> ``` ```html <!-- ChildComponent.vue --> <template> <div>{{message}}</div> </template> <script> export default { props: ['message'], mounted(){ this.$emit('childEvent','Hello Parent'); } } </script> ``` #### EventBus 实现松耦合的消息机制 如果不想引入额外库又希望保持组件间的解耦,则可以考虑采用发布/订阅模式下的 Event Bus 方案。先创建一个单独文件用来实例化一个新的 Vue 对象作为消息中心,在需要发送信息的地方发射特定名称的事件;接收方监听该类名即可响应处理逻辑[^3]。 ```javascript // eventBus.js import Vue from 'vue'; export const bus = new Vue(); // ComponentA 发送者 bus.$emit('event-name', payload); // ComponentB 接收者 bus.$on('event-name', function(payload){...}); ``` 以上几种都是常用的 Vue 组件间乃至整个单页应用内部各部分相互交流的有效手段之一,实际开发过程中可根据具体情况选用最合适的方案[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值