iview 父组件动态传值给子组件
父组件
<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 父组件动态传值给子组件的更多相关文章
- vue 父组件动态传值至子组件
1.进行数据监听,数据每次变化就初始化一次子组件,进行调取达到传递动态数据的目的普通的监听: watch:{ data: function(newValue,oldValue){ doSomeThin ...
- Vue--子组件互相传值,子组件来回传值,传值反复横跳
Vue--子组件传值,子组件来回传值,子组件传值反复横跳 我不不仅要子组件之间直接传值,我还要传过去再传回来,传回来再传过去,子组件直接反复横跳 解决问题 给组件传值,并不知道改值的校验结果 同一个组 ...
- vue点击父组件里面的列表动态传值到子组件
<template> <div> 爸爸 <div style="background-color:yellow;margin-top:10px" v- ...
- vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数
父组件 <template> <div id="app"> <div>详情内容</div> <button v-on:clic ...
- vue父组件向子组件动态传值的两种方法
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空 ...
- 父组件传值给子组件的v-model属性
父组件如何修改子组件中绑定的v-model属性 因为v-model属性是双向数据绑定,而vue的通信方式又是单向通信,所以,当子组件想要改变父组件传过来的值的属性时,就会报错,典型的就是父组件传值给子 ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- vue 组件-父组件传值给子组件
父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...
随机推荐
- 【转】centos7安装
转自:https://blog.csdn.net/qq_42570879/article/details/82853708 1.CentOS下载CentOS是免费版,推荐在官网上直接下载,网址:htt ...
- CentOS7 源进源出
echo 200 ct >> /etc/iproute2/rt_tablesecho 201 cu >> /etc/iproute2/rt_tables ip route ad ...
- P1079Vigenère密码
这是2012年noip提高组的的DAY1T1,我用了一下午的时间,一次性AC^^. 这是一个字符串的模拟题.首先给出了一个密码对应法则,我们发现在同一对角线的明文通过密钥得出来的密文是相同的.根据八皇 ...
- 最小生成树: HDU1233还是畅通工程
还是畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- C#导出大量数据到excel,怎么提升性能
一,要提升性能,我们先要知道耗时的地方在哪里 1,数据库查询,2,把数据组合成新集合循环嵌套太多 二,那我们怎么优化呢? 一,数据库查询,1>,数据库查询:如果数据量小,我们可以用临时datat ...
- Spark Streaming整合logstash + Kafka wordCount
1.安装logstash,直接解压即可 测试logstash是否可以正常运行 bin/logstash -e 'input { stdin { } } output { stdout {codec = ...
- Python webdriver调用Chrome报错
报错信息如下: selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to b ...
- linux 打包和压缩的概念和区别
对于刚刚接触Linux的人来说,一定会给Linux下一大堆各式各样的文件名 给搞晕.别个不说,单单就压缩文件为例,我们知道在Windows下最常见的压缩文件就只有两种,一是,zip,另一个是.rar. ...
- Linux系统性能测试工具(七)——网络性能工具之iperf
本文介绍关于Linux系统(适用于centos/ubuntu等)的网络性能测试工具-iperf.磁盘io性能测试工具包括: iperf: netperf 参考链接:https://www.cnblog ...
- python基础操作---string
#coding:utf-8 var1 = 'Hello World!' print var1[::] print len(var1) print var1[0:len(var1)] print var ...