![vue中子组件通过$parent操作父组件的参数或者方法 vue中子组件通过$parent操作父组件的参数或者方法](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1)
先看一个简单的demo:
父组件添加一个弹框,弹框的内容是另外导入的一个子组件:
<Modal v-model="accountDetailsModal" class="ivu-model-cell" footer-hide
width="92%" :styles="{height: '90%'}">
<accountDetailsModalCell v-if="accountDetailsModalShow"></accountDetailsModalCell>
</Modal>
在子组件点击某个按钮,关闭父组件的弹框:
<!-- 点击关闭父组件的弹框 -->
<span @click="$parent.$parent.accountDetailsModal = false">按钮</span>
这里用了两个$parent是因为Modal弹框本身就属于一个子组件,子组件嵌套子组件,嵌套了两层的关系。