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;
}