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>
 1 export default {
 2   components: { MaintenanceSuper},
 3   data() {
 4     return {
 5       value:{
 6         telephone:null,
 7       },
 8       myData: {
 9         pageNum: 1,
10         pageSize: 10,
11         total: 0,
12         userModel: {
13           id: null,
14           account: null,
15           director: null, //负责人
16         }
17       },
18 }

子组件

<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;
    }
}

 

原文地址:https://www.cnblogs.com/wudixiaoguaishou/p/11903979.html