uniapp父子传点击事件

1.写一个简单的子组件main/index.vue：

<template>
    <view>
        
    </view>
</template>

<script>
    export default {
        data(){
            return {
                
            }
        },
        onLoad(){
            
        },
        methods:{
            childMethod() {
                console.log('childMethod do...')
            }
        }
    }
</script>

<style>

</style>

在子组件中有一个childMethod方法

2.在父组件中引用这个子组件的childMethod方法：

<template>
    <view class="content">
        <mian-index ref="mainindex"></mian-index>
        <view @tap="dataAction">button</view>
    </view>
</template>
<script>
    import mainindex from '@/pages/main/index/index.vue'
    export default {
        data() {
            return {

            };
        },
        components:{
            'mian-index':mainindex
        },
        onLoad(e) {

        },
        methods:{
            dataAction:function(){
                this.$refs.mainindex.childMethod();
            }
        }
    }
</script>

<style scoped>
.content{
    width:100%;
    box-sizing: border-box;
}
</style>

（一）子组件---->父组件
子组件（发送）
（1）绑定@click，
（2）在return定义数据名，
（3）methods方法中进行传递。
例：

//view中

<button @click="click"></button>
//js的return中
  return:{
	title:'son'
}

//在methods中进行传值

methods:{
	click(){
  this.$emit('change',this.title)
	}
}

父组件（接收）
（1）绑定事件，
（2）在return定义数据名，
（3）methods方法中进行接收。
例：

//view中

<child @change="change">
//js的return中
  return:{
	title:''
}

//在methods中进行接收

methods:{
	change(res){
	console.log(res)
	this.title=res
	}
}

（一）父组件---->子组件
父组件（发送）
（1）绑定数据，
（2）在return定义数据名，
例：

//view中

<child :text="text"></child>
//js的return中
  return:{
	text:"i am father"
}

子组件（接收）
（1）绑定数据，
（2）在props定义数据名，
例：

//view中

 <view>{{text}}<view>
//js的props中
 props:['text']  
//或者
text:{
 type:String //定义类型
  default:""  //默认值
         }

完整的

//这是父组件的东西
<template>
	<view style="height: 100%;">
		<view style="width: 60%;height: 100rpx; background-color: #3856BA; margin: 0 auto;color: #FFFFFF;text-align: center;line-height: 100rpx; z-index: 66666666666666666;"@tap="BUT">按钮</view>
		<!--ref调用函数  change获取数据  text要传的值-->
		<Tank ref="Tank" :text="text" @change="change"></Tank>
	</view>
</template>

<script>
	import Tank from './tank.vue'
	export default {
		data() {
			return {
				text: 0,
				r_ly: false,
				current: '', //接收弹框子组件参数 1余额支付 2微信支付
			};
		},
		//调用函数
		components: {
			'Tank': Tank
		},

		/** 监听页面加载 */
		onLoad: function(options) {
			//监听数据
			this.change()
		},


		methods: {
			BUT(e) {
				//调用函数
				this.$refs.Tank.getCancelOrder();
			},
			//监听数据
			change(res) {
				console.log(res)
				this.title = res
			},


		}
	};
</script>




//子组件的
<template>
	<!-- <view class="botm_bt" v-if=" infor.order_status >0 && infor.order_status <5" @click.stop="getTank">取消订单</view> -->
	<view class="res_tk" v-if="r_ly" @touchmove.stop.prevent="">

		<view class="tk_bs">
			<view class="bts">
				<view class="bt_h1">支付方式</view>
				<view class="Xx_xxi" @click.stop="getTank">
					<view class="nei_x1"></view>
					<view class="nei_x2"></view>
				</view>
			</view>
			<view class="order flex_a" style="border-bottom:1px solid #F4F4F4;" v-model="indexa" @click.stop="re_son" v-if="text==1? false:true">
				<view class="flex_d" style="width: 100%;">
					<image class="order_img" :src="picture.order_balance" mode="aspectFill">
					</image>余额支付<view class="order_yellow">(余额0元) </view>
				</view>
				<view :class="1 == current ? 'ico-moon icon-success-tip' : 'reason_active' " style="color: #4F77E1;">
				</view>
			</view>
			<view class="order lex_a" v-model="indexb" @click.stop="re_sons" v-if="text==2? false:true">
				<view class="flex_d" style="width: 100%;">
					<image class="order_img" :src="picture.order_weixin" mode="aspectFill">微信支付</image>
				</view>
				<view :class="2 == current ? 'ico-moon icon-success-tip' : ' reason_active' " style="color: #4F77E1;">
				</view>
			</view>
			<view class="bt_qd flex_b" @click.stop="getCancelOrder">确定</view>
		</view>

	</view>
</template>

<script>
	var app = getApp({
			allowDefault: true
		}).globalData,
		core = app.requirejs("core");
	import icon from '../../static/js/icons.js'
	export default {
		props: ['text'], //接收父页面穿的参数名
		data() {
			return {
				picture: icon,
				current: '', //单选框默认为空表示未选择 也是传是余额支付或者是微信支付
				indexa: 1,
				indexb: 2,
				r_ly: false,
			}
		},
		//判断text 传来的值
		mounted: function() {
		if( this.text==1){
			this.current=2
		}else if(this.text==2) {
			this.current=1
		}else{
			this.current=1
		}
		},
		methods: {
			//显示隐藏
			getTank: function() {
				let ta = this;
				ta.r_ly = !ta.r_ly
			},
			//单选框1
			re_son: function() {
				let ta = this;
				ta.current = ta.indexa
			},
			//单选框2
			re_sons: function() {
				let ta = this;
				ta.current = ta.indexb
			},
				//显示隐藏
			getCancelOrder: function() {
				let ta = this;
				ta.r_ly = !ta.r_ly
				this.$emit('change', this.current)
			},
		}
	}
</script>

<style>
	@import url("./tank.css");
</style>

样式
子组件样式

@import '/static/css/font_icon.css';
.res_tk {
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 750rpx;
	z-index: 2001;

}

.tk_bs {
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #FFFFFF;
	width: 750rpx;
	border-radius: 20rpx 20rpx 0px 0px;
	animation-iteration-count: 1;
	animation: mymove2 0.3s;
	-webkit-animation-iteration-count: 1;
	backface-visibility: hidden;
}


@keyframes mymove2 {
	0% {
		transform: translate(0rpx, 100vh)
	}

	100% {
		transform: translate(0rpx, -0vh)
	}
}

@-webkit-keyframes mymove2 {
	0% {
		transform: translate(0rpx, 100vh)
	}

	100% {
		transform: translate(0rpx, -0vh)
	}
}

.bts {
	width: 750rpx;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
}

.bt_h1 {
	color: #333333;
	font-size: 40rpx;
}

.Xx_xxi {
	width: 20rpx;
	height: 36rpx;
	margin: 36rpx 8rpx 0 0;
	position: absolute;
	top: 0;
	right: 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.nei_x1 {
	transform: rotate(45deg);
	width: 20rox;
	height: 100%;
	border: 2rpx solid #666666;
}

.nei_x2 {
	margin: 0 0 0 -4rpx;
	transform: rotate(-45deg);
	width: 20rox;
	height: 100%;
	border: 2rpx solid #666666;
}

.order {
	width: 750rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	border-bottom: 2rpx solid #F4F4F4;
	padding: 34rpx 24rpx;
	color: #333333;
	font-size: 28rpx;
}

.order_img {
	width: 44rpx;
	height: 44rpx;
	padding: 0 10rpx 0 0;
}

.order_yellow {
	font-size: 24rpx;
	color: #EA3323;
}

.bt_qd {
	width: 460rpx;
	height: 34rpx;
	background: #4F77E1;
	border-radius: 40rpx;
	margin: 40rpx auto;
	padding: 20rpx 0;
	font-size: 32rpx;
	color: #FFFFFF;
}

.reason_active {
	width: 24rpx;
	height: 24rpx;
	background-color: #FFFFFF;
	border: 2rpx solid #999999;
	border-radius: 50% 50%;
}
.flex_a{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex_b{
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex_d{
	display: flex;
	align-items: center;
}