子组件返回按钮父组件

标签：ESS   import   rgba   hand   lse   prim   exp   控制   moc   

父组件代码   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>

子组件返回按钮父组件

标签：ESS   import   rgba   hand   lse   prim   exp   控制   moc   

原文地址：https://www.cnblogs.com/yoututu/p/14150365.html