父组件
<maintenance-super :show="{'modalSuper':modalSuper,'myData':myData}" @on-close="closeModal" ></maintenance-super>

 

父组件
<maintenance-super :show="{'modalSuper':modalSuper,'myData':myData}" @on-close="closeModal" ></maintenance-super>
 export default {
components: { MaintenanceSuper},
data() {
return {
value:{
telephone:null,
},
myData: {
pageNum: 1,
pageSize: 10,
total: 0,
userModel: {
id: null,
account: null,
director: null, //负责人
}
},
}

子组件

<template>
<div>
<!-- =================== 管理员:表格 =================================== -->
<Modal :title="title" v-model="modalSuper" width="800" :closable="false" @on-hide="hide">
<Table border :columns="superColumns" :data="superData">
<template slot-scope="{ row, index }" slot="action">
<Button type="primary" size="small" @click="restPassWordInfo(row,index)">重置密码</Button>
<Button type="error" size="small" @click="disableAccount(row,index)">警用</Button>
</template>
</Table>
<!-- ======================= 分页 ==================================== -->
<Page
:total="superForm.total"
:current="superForm.pageNum"
:page-size="superForm.pageSize"
@on-change="handlePageSuper"
@on-page-size-change="handlePageSizeSuper"
class="tablePage"
/> <div style="text-align: right;margin-top: 10px;">
<Button @click="handleResetSuper('searchData')">取消</Button>
<Button icon="md-add" type="primary" @click="toSuperModalAdd">新建管理员账户</Button>
</div>
<div slot="footer"></div>
</Modal>
</div>
</template>
props:['show','myData'],
  watch: {
show(validate) {
console.log(validate,'1')
if (validate.modalSuper == true) {
this.modalSuper = validate.modalSuper;
this.getTableDataPage();
}
}

传值给父,弹框关闭

    handleResetSuper(name) {
// this.modelSuperAdd = false;
// this.$refs[name].resetFields();
this.modalSuper = false;
this.$emit("on-close", false);
},
onClose() {
this.$emit("on-close", false);
},

父组件接收到子组件的传值

  methods: {
closeModal(newVal) {
this.modalSuper = newVal;
}
}

 

iview 父组件动态传值给子组件的更多相关文章

  1. vue 父组件动态传值至子组件

    1.进行数据监听,数据每次变化就初始化一次子组件,进行调取达到传递动态数据的目的普通的监听: watch:{ data: function(newValue,oldValue){ doSomeThin ...

  2. Vue--子组件互相传值,子组件来回传值,传值反复横跳

    Vue--子组件传值,子组件来回传值,子组件传值反复横跳 我不不仅要子组件之间直接传值,我还要传过去再传回来,传回来再传过去,子组件直接反复横跳 解决问题 给组件传值,并不知道改值的校验结果 同一个组 ...

  3. vue点击父组件里面的列表动态传值到子组件

    <template> <div> 爸爸 <div style="background-color:yellow;margin-top:10px" v- ...

  4. vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数

    父组件 <template> <div id="app"> <div>详情内容</div> <button v-on:clic ...

  5. vue父组件向子组件动态传值的两种方法

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空 ...

  6. 父组件传值给子组件的v-model属性

    父组件如何修改子组件中绑定的v-model属性 因为v-model属性是双向数据绑定,而vue的通信方式又是单向通信,所以,当子组件想要改变父组件传过来的值的属性时,就会报错,典型的就是父组件传值给子 ...

  7. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  8. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  9. vue 组件-父组件传值给子组件

    父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...

随机推荐

  1. Slim Span (最小生成树)

    题意 求生成树的最长边与最短边的差值的最小值 题解 最小生成树保证每一条边最小,就只要枚举最小边开始,跑最小生成树,最后一个值便是最大值 在枚举最小边同时维护差值最小,不断更新最小值. C++代码 / ...

  2. 【转】MySQL my.cnf 参数 详解

    [client] port    = 3306    //客户端端口号为3306 socket  = /tmp/mysql.sock  //套接字文件(sockets),这种文件一般用在网络上的资料套 ...

  3. C++设计模式:访客模式

    访客模式:通俗的说, 就是定义一个访问者角色, 当对指定角色进行访问时要通过访问者进行访问. 访客模式的侵入性适中,仅在被访问的类里面加一个对外提供接待访问者的接口. 访客模式的优点: 符合单一职责原 ...

  4. 简单的物流项目实战,WPF的MVVM设计模式(一)

    新建一个WPF项目,命名为WMS 然后分别新建文件夹,Data,Models,Views,ViewModels,Services,如下图所示 然后通过NuGet安装连个Nuget包,分别为SQLite ...

  5. JAVA 泛型 - Class<T>

    Class 类 Class 已经泛型化了,但是很多人一开始都感觉其泛型化的方式很混乱.Class 中类型参数 T 的含义是什么?事实证明它是所引用的类接口.怎么会是这样的呢?那是一个循环推理?如果不是 ...

  6. Vue实现二级菜单的显示与隐藏

    <html> <head> <title>Vue实现二级菜单的显示与隐藏</title> <script src="vue.js&quo ...

  7. 第一次整合ssm环境后,对请求流程的理解 ,以及一些配置(有错就更新)

    工程结构图: 显示层(handler/controller): request请求到springmvc的前端控制器,从处理器映射器找相应的handler(用@RequestMapping(" ...

  8. Python自动化学习--Webdriver中的常用方法

    from selenium import webdriver driver = webdriver.Chrome() driver.get("https://www.baidu.com/&q ...

  9. 09java进阶——IO

    1.File类 1.1目录及路径分隔符 package cn.jxufe.java.chapter09.demo01; import java.io.File; public class Test01 ...

  10. 10年前文章_mpc8313的ltib安装以及u-boot重新编译

    Linux系统下安装ltib(linux target image builder): 1.       下载光盘到本地 wget http://192.168.1.4/share/vendor/mp ...