使用this.$refs传值组件复用之操作日志

1.父组件引用 注册 使用

 import operationLogs from '@/components/cline/operationlog';
 components: {operationLogs},
 <operation-logs ref="operationLog" @success="operationOk"></operation-logs>  //使用
  
  //这是操作弹框要显示的内容不一样 子组件中写了就显示这些值 不写的则显示默认的值   使用
    <operation-logs ref="operationLog" @success="operationOk">
        <el-table-column prop="index" label="序号" width="90"></el-table-column>
        <el-table-column prop="module" label="操作方式" width="170"></el-table-column>
        <el-table-column prop="name" label="操作人" width="160"></el-table-column>
        <el-table-column prop="createtime" label="操作时间" width="160"></el-table-column>
        <el-table-column prop="operate" label width="1" fixed></el-table-column>
      </operation-logs>

 <view @click="operation(selectRow)" v-if="hasPermission(192)">操作日志</view>  //点击弹出操作日志弹框

3.主要是这2个方法

 //操作日志
            async operation(row){
                let than =this
                this.userId = row.id;  //获取id
                const res =await operationLog({userId:this.userId,page:1,size:8})
                let info={}
                if(res){info=res.data}
                //通过refs把值传到子组件
                than.$refs.operationLog.openModal(row.id,row.username,info);  
            },
            //子组件emit给父组件的事件
            async operationOk(item){
                //这是点击分页获取不同的数据 所有后面要重新传新数据过去
                const res =await operationLog({userId:this.userId,page:item.page,size:item.size})
                //拿到值后在把值传给子组件
                this.$refs.operationLog.load(res.data);     
            }

2.准备子组件 代码结构很简单

<template>
  <el-dialog title="操作日志" :visible.sync="showModal" width="35%">
    <div>
      <el-table :data="data" height="430px">
        <slot>  //这里是插槽 组件复用这里的内容可能不一样  solt 里面的是默认的内容
        	<el-table-column prop="index" label="序号" width="90"></el-table-column>
        	<el-table-column prop="typeText" label="操作内容" width="170"></el-table-column>
       		<el-table-column prop="username" label="操作人" width="160"></el-table-column>
        	<el-table-column prop="createTime" label="操作时间" width="160"></el-table-column>
        </slot>
      </el-table>
      <div class="block">
        <el-pagination   //分页控件
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[8,20,30,40]"
          :page-size="pageSize"
          :pager-count=5
          layout="total, sizes, prev, pager, next, jumper"
          :total="length"
        ></el-pagination>
      </div>
    </div>
    <div slot="footer" class="dialog-footer"></div>
  </el-dialog>
</template>

 methods: {
    openModal(userId,userName,info) {
      // console.log(userId,"4125")
      //这是父组件第一次点击打开操作日志弹框拿到的数据
      this.userId = userId;
      this.showModal = true;
        let data =info
        this.data = data.list;
        this.length = data.total;
        this.pageSize = data.pageSize;
        this.pageIndex = data.pageNum;
        data.list.forEach((item, index) => {
        item.index = (this.pageIndex - 1) * this.pageSize + index + 1;
        });
    },
   load(item) {
       //这是点击分页之后拿到的数据
        let data =item
        this.data = data.list;
        this.length = data.total;
        this.pageSize = data.pageSize;
        this.pageIndex = data.pageNum;
        data.list.forEach((item, index) => {
        item.index = (this.pageIndex - 1) * this.pageSize + index + 1;
        });
    },
    
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
		//子组件获取到的分页参数传给父组件
      this.$emit("success",{page:this.pageIndex,size:this.pageSize})
    },
    handleCurrentChange(currentPage) {
      this.pageIndex = currentPage;
      //子组件获取到的分页参数传给父组件
      this.$emit("success",{page:this.pageIndex,size:this.pageSize})
    },
  }

以上是子组件的主要代码 重点在父组件
3.看效果图