子组件返回按钮父组件
父组件代码 demo
<template>
<div>
<!-- 父组件数据 -->
<!-- 通过showFlag判断子父组件得隐藏和现实，默认父组件为现实 true -->
<div v-if="showFlag">
<el-button type="primary" size="mini" @click = "handleClick">进入子组件</el-button>
</div>
<!-- 子组件 -->
<childen-one v-else :handleShow = "handleShow"></childen-one>
</div>
</template>
<script>
import childenOne from '@/components/democ/childenOne.vue'
export default {
data() {
return {
showFlag:true
}
},
components:{
'childen-one':childenOne
},
methods:{
// 点击进入子组件 状态为false 进子组件
handleClick() {
this.showFlag = false
},
// 子组件调用的方法，由父组件传递给子组件
handleShow() {
this.showFlag = true
}
}
}
</script>
子组件 childenOne
<template>
<div>
<el-button type="success" size="medium" @click="back">返回</el-button>
</div>
</template>
<script>
export default {
props: {
handleShow: {
type: Function
}
},
methods: {
back() {
//调用父组件中方法，控制true
this.handleShow();
},
}
};
</script>
