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，成爲全局組件