先看一个简单的demo:ide
父组件添加一个弹框,弹框的内容是另外导入的一个子组件:spa
<Modal v-model="accountDetailsModal" class="ivu-model-cell" footer-hide width="92%" :styles="{height: '90%'}"> <accountDetailsModalCell v-if="accountDetailsModalShow"></accountDetailsModalCell> </Modal>
在子组件点击某个按钮,关闭父组件的弹框:code
<!-- 点击关闭父组件的弹框 --> <span @click="$parent.$parent.accountDetailsModal = false">按钮</span>
这里用了两个$parent是由于Modal弹框自己就属于一个子组件,子组件嵌套子组件,嵌套了两层的关系。blog