记一次vue组件的开发过程

背景

项目中有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)