记一次vue组件的开发过程

朱雀 2022-02-01 16:06 228阅读 0赞

# 背景 #

项目中有20几个报表，每个报表页面中点击“查看审核日志”按钮时需要弹窗显示日志列表。这个功能代码量不大，但是如果每个页面复制粘贴过去，也是非常麻烦。一旦有修改，又要一遍遍改过去，于是封装了一个vue组件。

# 组件文件 #

src/compontents/AuditHistory.vue

<template>
       	    <el-dialog title="审核记录" :visible.sync="showDialog" @open="onopen()" @close="onclose"    >
            <el-table :data="historyData"  max-height="600">
                <el-table-column property="createTime" label="时间" width="150"></el-table-column>
                <el-table-column property="userName" label="人员" width="200"></el-table-column>
                <el-table-column property="auditResult" label="审核结果"></el-table-column>
                <el-table-column property="failReason" label="不通过原因"></el-table-column>
            </el-table>
        </el-dialog>
    </template>
    <script>
      
        export default {
            props:[
               "visible", "tableName"
            ],
            data() {
                return {
                    showDialog:false,
                    historyData:[],
                    formLabelWidth: '120px'
                };
            },
            components: {
    
     
            },
            methods:{
                onclose(){
                    console.info("close")
                     this.$emit('onclose')
                     
                },
                onopen(){
                    console.info("onopen")
                    //向后端请求数据
                    this.$http({
                        method: 'get',
                        url: '/get_auditReportData?tableName=' + this.tableName 
                    }).then(res => {
                        console.log(res);
                        this.historyData=res.data;
                        this.visible=true;
                        
                    }).catch(e => {
                        console.error(e)
                        this.$message.error(e.cause);
    
                    })
                }
            },
            computed:{
              
            },
            watch:{
                  visible(){
                    this.showDialog=this.visible;
                      
                 }
            },
            mounted(){
                console.info("init")
                
            }
    
        }
    </script>

## 要点 ##

*  组件的页面和普通页面同样由`template` 和`script`组成
 *  `props` 声明该组件支持的属性, 不要对组件的属性进行修改
 *  `data` 声明组件的数据，同一样变量不能同时存在于props和data
 *  `:visible.sync="showDialog"` 使用`showDialog`来控制dialog的显示和隐藏，并且点击占上角的x时会改变`showDialog`来关闭dialog，这也是为什么不用 `:visible.sync="visible"`的原因
 *  `@open="onopen()" @close="onclose"` 绑定了对话的打开和关闭事件
 *  `this.$emit('onclose')` 该组件向父级组件（页面）发送一个事件，父级组件可通过`@onclose=“xxx()”` 来处理这个事件
 *  `this.showDialog=this.visible;`通过监控 `visible`的变化来改变`showDialog`的值

# 组件的使用 #

html中
    <audit-history :visible="showHistory" :tableName="user"  @onclose="onClose()"></audit-history>
    
    methods节点下：
    //显示日志
    function showLog(){
    	this.showHistory=true;
    }
    //关闭日志
    function onClose(){
    	this.showHistory=false;
    }

# 全局导入组件 #

为方便使用，可以在main.js中全局导入这个组件，这样就不用在每个页面进行导入了  
main.js

import AuditHistory from './components/AuditHistory';
     Vue.component('AuditHistory',AuditHistory)