父组件页面部分
<template>
<view>
<button @click="optionBetClick()">Selected</button>
<optionBet :isoptionBetShow='isoptionBetShow' :gameId='gameId' @optionBetCancel='optionBetCancel'></optionBet>
</view>
</template>
<script>
import optionBet from '@/component/optionBet.vue'
components:{
optionBet
},
export default {
data() {
return {
isoptionBetShow:false,
gameId:0
}
}
}
methods:{
optionBetCancel(){
this.isoptionBetShow = false
},
optionBetClick(){
this.gameId = 6
this.isoptionBetShow = true
},
}
</script>
子组件部分
<template>
<view v-show="isoptionBetShow">
<button class="cancel-but" @click="cancle">CANCEL</button>
</view>
</template>
<script>
export default {
props:{
isoptionBetShow:{
type:Boolean,
dafault:false
}
gameId:{
type:Number,
dafault:""
}
},
data() {
return {
};
},
methods:{
//调用父组件的取消方法关闭组件
cancle(){
this.$emit('optionBetCancel')
},
}
</script>