先看一个简单的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. linux安装rabbitmq3.6.5

    一.准备依赖包 yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c++ k ...

  2. netty(二) 创建一个netty服务端和客户端

    服务端 NettyServer package com.zw.netty.config; import com.zw.netty.channel.ServerInitializer;import io ...

  3. Linux 禁止普通用户su到root

    Linux账户权限管理上为了防止普通用户通过su切换到root用户,需要修改/etc/pam.d/su和/etc/login.defs两个配置文件. Step1:修改 /etc/pam.d/su文件 ...

  4. 47-java 排列组合

    import java.util.HashSet; public class Main1 { public static int ys = 0; public static int ys2 = 0; ...

  5. node.js中 express + multer 处理文件上传

    multer中间件,可以很方便的结合express处理用户表单上传的文件. 一.安装multer npm install multer 二.处理单个文件上传 const express = requi ...

  6. maven打包不包含配置文件[z]

    如果使用maven-jar-plugin和maven-dependency-plugin打包,排除配置文件的方法: 上面的配置是把resources下的配置文件不打进项目的jar包中,主要使用的是&l ...

  7. CentOS 6.7快速搭建lamp环境

    安装前要关闭防火墙,防止外网不能访问,这一点很重要,要不然外网访问不了: ①关闭防火墙:service iptables stop ②永久关闭防火墙:chkconfig iptables off ③查 ...

  8. HDU2028

    #include <bits/stdc++.h> using namespace std; ; int gcd(int a, int b) { ? b:gcd(b, a%b); } int ...

  9. UI 设计的整个工作流程是怎样的?

    作为一个专业UI设计师,不仅仅要了解整个产品在UI界面设计,交互设计中的工作流程,更需要了解整个产品从需求提出到产品上线的整个工作流程. 以下是互联网产品个部门的工作分配及流程: 从图中可以看到,一个 ...

  10. 地址重写 No input file specified的解决方法

    转载自:http://blog.csdn.net/williamsblog/article/details/37532737 (一)IIS Noinput file specified 方法一:改PH ...