先看一个简单的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弹框本身就属于一个子组件,子组件嵌套子组件,嵌套了两层的关系。

vue中子组件通过$parent操作父组件的参数或者方法的更多相关文章

  1. EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  2. Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)

    Vue组件通讯   Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...

  3. vue 简单实现父组件向子组件传值,简单来说就是子组件肆意妄为的调用父组件里后台返回的值

    首先在于父子组件传值的方法很多,本人在这里只是简单描述一下一个组件里面引用了子组件,那么子组件如何才能获取父组件中后台返回的值呢? 首先调用组件相信大家都应该明白了(不明白的自己撸撸文档), < ...

  4. vue子组件传参给父组件

    关于父组件传参给子组件,可以看我另一篇文章 教程开始: 我们要实现的效果是:在子组件的Input框输入,父组件中实时更新显示.(也就是把子组件中的数据传给父组件) 一.子组件代码 template部分 ...

  5. vue 子组件传递数据跟父组件

    子组件 <body> <div v-on:click="test"></div> <script> export default { ...

  6. vue中使用ts后,父组件获取执行子组件方法报错问题

    一.问题产生背景: 子组件的一个方法: update () { this.$nextTick(() => { this.ul_slots.forEach((ul, cur_slots_index ...

  7. 基于vue,通过父组件触发子组件的请求,等请求完毕以后,显示子组件,同时隐藏父组件

    正常情况下,子组件应该尽量减少业务逻辑,而应该将业务逻辑放到父组件里面,从而减少耦合,但是当 我们不得不用到这种情况时,可以采用下面的思路 解决方案 尽量将请求单独作为一个函数(不要将请求放到show ...

  8. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  9. vue 和react中子组件分别如何向父组件传值

    vue子组件和父组件双向传值: 子: Vue.component("childComponent",{ template:`<div><p @click='pos ...

随机推荐

  1. Windows导入EOS工程

    [Windows导入EOS工程] 编写 EOS 智能合约时,有许多EOS提供的结构.函数.宏.文档对这些内容的描述毕竟模糊,再多的文档也比不过看实际的代码,所以还要下载EOS代码看一下. 最好有个ID ...

  2. Could not GET 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.1.2/gradle-3

    参考 https://blog.csdn.net/verkery6/article/details/80797705

  3. django 数据库配置 ,APP 迁移.模型基础

    # 1.数据库的连接配置django 连接mysql的配置流程:- 安装 pymysql pip install pymysql- 创建数据库用户有创建数据库权限的用户- 创建数据库crm .进入数据 ...

  4. vue去掉地址栏#(带来的后果)

    按以下修改后,带来的后果:打包后部分图片访问不到,首页没加载router-view内容 router 的index中配置模式设置为history export default new Router({ ...

  5. easyui 改变单元格背景颜色

    另外一种方法:https://www.cnblogs.com/raitorei/p/9989649.html easyui的datagrid改变整行颜色:https://www.cnblogs.com ...

  6. python shell的交互模式和文本编辑模式

    之前学python的时候,是拿<笨办法学python>练习的. 书里面基本都是以.py文件去写代码,也就是文本编辑模式. 而交互模式(也就是powershell),唯有在input用户输入 ...

  7. [leetcode]236. Lowest Common Ancestor of a Binary Tree二叉树最近公共祖先

      Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. Accordi ...

  8. Android自定义View之上拉、下拉列表 头部元素跟随 缩放、平移效果的实现

    滑动ListView列表然后 listView上边的视图 跟随着上拉或者下拉的距离 自动放大或者缩小  视图里边元素自动平移的效果 思路很简单 根据listView 的滑动距离去计算图片和文字应该平移 ...

  9. FastFDS基础

    1. FastDFS介绍 FastDFS( Fast Distributed file system)是一款轻量级的.高性能的.阿里巴巴开源的分布式文件系统.该系统的作者是余庆 (happyfish1 ...

  10. cmd输入appium-doctor,运行时提示'node'不是内部或外部的命令

    一.提示'node'不是内部或外部命令,先按照下面步骤操作: 1.设置APPIUM_HOME系统变量,值为当前appium安装目录,例如:D:\software_install\Appium 2.设置 ...