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 ...
随机推荐
- [转帖]深入理解 MySQL—锁、事务与并发控制
深入理解 MySQL—锁.事务与并发控制 http://www.itpub.net/2019/04/28/1723/ 跟oracle也类似 其实所有的数据库都有相同的机制.. 学习了机制才能够更好的工 ...
- Field baseMapper in com.baomidou.mybatisplus.extension.service.impl.ServiceImpl required a single bean, but xx were found:
在学习使用 mybatis-plus 时,遇到一个奇怪的异常 如 代码一: 代码一: Error starting ApplicationContext. To display the conditi ...
- 高级BASH
Bash介绍与入门 1,简介 Bash(GNU Bourne-Again Shell)是一个为GNU计划编写的Unix shell,它是许多Linux平台默认使用的shell shell是一个命令解释 ...
- nodejs版实现properties后缀文件解析
1.propertiesParser.js let readline = require('readline'); let fs = require('fs'); // properties文件路径 ...
- 前端UI库推荐(pc和移动)
此推荐个人喜好,不喜勿喷. 1. pc 端 elementUI (生态强大,样式生硬) iview (推荐,组件丰富) bootStrap layUI easyUi 2. 移动端 mintUI ant ...
- 解决PKIX path building failed的问题
Java在请求某些不受信任的https网站时会报:PKIX path building failed 解决方法一:使用keytool手动导入证书,为JRE环境导入信任证书 参考:http://www. ...
- thinkphp5发送邮件(实例代码 非常适合新手)
第一步:在(https://pan.baidu.com/s/1Fq6lONHlft5D6jvOnNwtoA)下载 phpmailer.rar 解压 然后把文件放入 vendor目录下 第二步:在 ap ...
- React -- 3/100 】组件通讯
通讯 | props | prop-types 组件通讯 Props: 组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props /* class */ .parent-box ...
- Trait讲解
<?php /** * Trait解决PHP单继承的一种方法,使开发人员在不同层次结构的类中复用属性和方法 * Trait无法实例化 * Trait不是类,不能被继承,所以不能再Trait中不能 ...
- 初学Git——命令总结
首先,感谢廖雪峰老师制作的Git教程:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b0 ...