vue中子组件通过$parent操作父组件的参数或者方法
先看一个简单的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操作父组件的参数或者方法的更多相关文章
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)
Vue组件通讯 Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...
- vue 简单实现父组件向子组件传值,简单来说就是子组件肆意妄为的调用父组件里后台返回的值
首先在于父子组件传值的方法很多,本人在这里只是简单描述一下一个组件里面引用了子组件,那么子组件如何才能获取父组件中后台返回的值呢? 首先调用组件相信大家都应该明白了(不明白的自己撸撸文档), < ...
- vue子组件传参给父组件
关于父组件传参给子组件,可以看我另一篇文章 教程开始: 我们要实现的效果是:在子组件的Input框输入,父组件中实时更新显示.(也就是把子组件中的数据传给父组件) 一.子组件代码 template部分 ...
- vue 子组件传递数据跟父组件
子组件 <body> <div v-on:click="test"></div> <script> export default { ...
- vue中使用ts后,父组件获取执行子组件方法报错问题
一.问题产生背景: 子组件的一个方法: update () { this.$nextTick(() => { this.ul_slots.forEach((ul, cur_slots_index ...
- 基于vue,通过父组件触发子组件的请求,等请求完毕以后,显示子组件,同时隐藏父组件
正常情况下,子组件应该尽量减少业务逻辑,而应该将业务逻辑放到父组件里面,从而减少耦合,但是当 我们不得不用到这种情况时,可以采用下面的思路 解决方案 尽量将请求单独作为一个函数(不要将请求放到show ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- vue 和react中子组件分别如何向父组件传值
vue子组件和父组件双向传值: 子: Vue.component("childComponent",{ template:`<div><p @click='pos ...
随机推荐
- 微擎系统jssdk系统快速签名变量
jssdkconfig = {php echo json_encode($_W['account']['jssdkconfig']);} || { jsApiList:[] }; jssdkco ...
- OpenCV常用数据类型
Point 二维点坐标(x,y) typedef Point3_<int> Point3i; typedef Point3_<float> Point3f; typedef P ...
- 通过msyql proxy链接mysql中文乱码及session问题
1.session问题 问题前提:一台机数据库为两个实例,通过不同的socket监听不同端口对外提供服务.不同的站点都访问同一个VIP不同的端口进行访问数据库. 故障现象:一旦有一个站点先用了这个vi ...
- Nginx(二)
利用include功能优化nginx的配置文件 [root@lnmp conf]# cat nginx.conf worker_processes 1; events { worker_con ...
- TZOJ 2099 Sightseeing tour(网络流判混合图欧拉回路)
描述 The city executive board in Lund wants to construct a sightseeing tour by bus in Lund, so that to ...
- [leetcode]364. Nested List Weight Sum II嵌套列表加权和II
Given a nested list of integers, return the sum of all integers in the list weighted by their depth. ...
- json-server使用及路由配置
1.先安装node.js,node.js中包含了json-server模块 2.在angular-hello/src/app/data-base.json文件中,编辑json格式的服务数据, { &q ...
- CentOS 使用yum命令安装出现错误提示”could not retrieve mirrorlist http://mirrorlist.centos.org ***”
执行yum命令时出现以上错误; 解决方法: vi /etc/sysconfig/network-scripts/ifcfg-eth0 这一段为你的网卡修改图中框框部分 然后重启 :reboot
- E: Sub-process /usr/bin/dpkg returned an error code
E: Sub-process /usr/bin/dpkg returned an error code (1)错误解决 在用apt-get安装软件时出现了类似于install-info: No dir ...
- [c#.net]未能加载文件或程序集“”或它的某一个依赖项。系统找不到指定的文件
问题是这样嘀: 项目采用了三层架构和工厂模式,并借鉴了PetShop的架构,因为这个项目也是采用分布式的数据库,目前只有三个数据库,主要出于提高访问性能考虑. 原来是按照网上对PetShop的介绍来给 ...