vue 封装自定义组件

• 创建组件.vue，其中props是该组件的属性配置项，data可以根据ref得到

<template id="sjld">
	<el-form :model="formData" ref="reference" :rules="validatoRule" label-width="120px" :inline="true" >
		<el-form-item label="表名" prop="name">
			<el-input v-model="formData.name" auto-complete="off" />
		</el-form-item>
		<el-form-item label="表描述">
			<el-input v-model="formData.description" />
		</el-form-item>	
		<el-form-item label="表类型">
			<el-select v-model="formData.tableType" placeholder="请选择">
			    <el-option
			      v-for="item in tableTypeOptions"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="表单类型">
			<el-select v-model="formData.formType" placeholder="请选择">
			    <el-option
			      v-for="item in tableTypeOptions"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="PC表单风格">
			<el-select v-model="formData.pcStyle" placeholder="请选择">
			    <el-option
			      v-for="item in tablePcStyle"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="手机表单风格">
			<el-select v-model="formData.mobileStyle" placeholder="请选择">
			    <el-option
			      v-for="item in tableMobileStyle"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</el-form-item>
		<el-tabs type="border-card">
		  	<el-tab-pane label="数据库属性">
		  		<el-row>
					<el-button size="small" @click="addColumn">增加</el-button>
					<el-button size="small" type="danger" @click="deleteColumn">删除</el-button>
				</el-row>
				<template>
						<el-table
						    :data="formData.sysTableColumnList"
						    style="width: 100%"
						    @selection-change="selsChange">
						    <el-table-column type="selection" width="55"></el-table-column>
						    <el-table-column label="序号" width="65" prop="columnIndex"> </el-table-column>
						    <el-table-column label="字段名称" width="180">
						      	<template slot-scope="scope">
						           <el-input v-model="scope.row.name" ></el-input>
						       	</template>
						    </el-table-column>
						    <el-table-column label="字段备注" width="180">
						      	<template slot-scope="scope">
						           <el-input v-model="scope.row.description"></el-input>
						       	</template>
						    </el-table-column>
						    <el-table-column label="字段长度" width="100">
						      	<template slot-scope="scope">
						           <el-input v-model="scope.row.columnLength"></el-input>
						       	</template>
						    </el-table-column>
						    <el-table-column label="小数点" width="100">
						      	<template slot-scope="scope">
						           <el-input v-model="scope.row.columnDecimal"></el-input>
						       	</template>
						    </el-table-column>
						    <el-table-column label="默认值" width="100">
						      	<template slot-scope="scope">
						           <el-input v-model="scope.row.defaultValue"></el-input>
						       	</template>
						    </el-table-column>
						    <el-table-column label="字段类型" width="150">
						      	<template slot-scope="scope">
						            <el-select v-model="scope.row.columnType" placeholder="请选择">
									    <el-option
									      v-for="item in tableColumnType"
									      :key="item.value"
									      :label="item.label"
									      :value="item.value">
									    </el-option>
								  	</el-select>
						       	</template>
						    </el-table-column>
						    <el-table-column label="是否主键" width="70">
						      	<template slot-scope="scope">
								  	<el-checkbox v-model="scope.row.isPrimeryKey"></el-checkbox>
						       	</template>
						    </el-table-column>
						    <el-table-column label="允许空值" width="70">
						      	<template slot-scope="scope">
								  	<el-checkbox v-model="scope.row.isAllowNull"></el-checkbox>
						       	</template>
						    </el-table-column>
						</el-table>
					</template>  
		  	</el-tab-pane>
		  	<el-tab-pane label="表单属性">配置管理</el-tab-pane>
		</el-tabs> 
		
	</el-form>
</template>
<script>
    export default {
        data() {
			return {
				sels : []
			}
        },
        props: {
            formData:Object,
            reference: Object,
            validatoRule: Object,
            tableColumnType: Array,
            tableTypeOptions: Array,
            tablePcStyle: Array,
            tableMobileStyle: Array,
            addColumn: Function,
            deleteColumn: Function

        },
        methods: {
        	selsChange: function (sels){
        		this.sels = sels;
        	}
        },
        mounted(){
           
        },
        computed: {
        }
    }
</script>
<style >
.el-row {
	line-height: 30px;
    margin-bottom: 10px;
}
.el-table-column {
	margin: 0px;
}
</style>

• 使用自定义组件，ref配置组件，就可以使用this.$refs.editForm得到该组件，就可以访问该组件暴露的data和method

import sysTableDetail from '../../components/sysTableDetail.vue'

components: {
            'sysTableDetail': sysTableDetail
        },

<sysTableDetail :formData="editForm" ref="editForm" :validatoRule="editFormRules" :tableColumnType="tableColumnType" :tableTypeOptions="tableTypeOptions" :tablePcStyle="tablePcStyle" :tableMobileStyle="tableMobileStyle" :addColumn="addColumn" :deleteColumn="deleteColumn">
			</sysTableDetail>

ok，可以了，当然组件也可以注册在main.js，成为全局组件