uniapp父子组件传值

uniapp父子组件传值

在components中创建组件mps/mps.vue
在要使用的页面调用组件方法

<mps :msg="msg" @showFaceDia="showFaceDias" ref="mps"></mps>

父传子
通过data下定义的msg传给子页面

props:['msg'], 

子传父
通过showFaceDias父页面定义的方法接受值

//子页面把值传给父页面的方法中
this.$emit('showFaceDia',"$emit我就是子页面的值传给父页面")
//父页面接受值
showFaceDias(e) {
				console.log(e)
			},

父调用子方法
通过ref="mps"绑定 mps是自己定义的

//btns为子页面自己定义的的方法
btns(){
		console.log("子页面的数据父页面调用")
	},
//父页面调用子页面btns方法
this.$refs.mps.btns(); 

子调用父页方法

//父页面定义的方法
looks() {
		console.log("这个是父页面的方法被子页面调用")
		},
//子页面调用父页面的looks方法	

//这个是兼容问题这个是h5专用	
// #ifdef H5
this.$parent.$parent.looks();
// #endif

//这个是除了h5其他端专用
// #ifndef H5
this.$parent.looks();
// #endif