抽离搜索条件部分为公共组件

+<template>
+	<el-form :inline="true" :model="formData" class="demo-form-inline">
+		<el-form-item label="宗地编码">
+			<el-input v-model="formData.zdbm" placeholder="输入宗地编码"></el-input>
+		</el-form-item>
+		<el-form-item label="坐落">
+			<el-input v-model="formData.zl" placeholder="输入坐落地址"></el-input>
+		</el-form-item>
+		<el-form-item label="不动产单元号">
+			<el-input
+				v-model="formData.bdcdyh"
+				placeholder="输入不动产单元号"
+			></el-input>
+		</el-form-item>
+		<el-form-item>
+			<el-button type="primary" @click="onSubmit">查询</el-button>
+			<el-button type="warning" @click="onSubmit">重置</el-button>
+			<el-button type="primary" class="moreSearchBtn" @click="onSubmit"
+				>更多查询</el-button
+			>
+		</el-form-item>
+		<el-form-item class="db" label="查询范围">
+			<el-checkbox-group v-model="formData.type">
+				<el-checkbox label="宗地" name="type"></el-checkbox>
+				<el-checkbox label="自然幢" name="type"></el-checkbox>
+				<el-checkbox label="户" name="type"></el-checkbox>
+				<el-checkbox label="构筑物" name="type"></el-checkbox>
+				<el-checkbox label="林权" name="type"></el-checkbox>
+				<el-checkbox label="宗海" name="type"></el-checkbox>
+			</el-checkbox-group>
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+export default {
+	name: "",
+	components: {},
+	props: {},
+	data() {
+		return {
+			formData: {
+				zdbm: "",
+				zl: "",
+				bdcdyh: "",
+				type: [],
+			},
+		};
+	},
+	created() {
+		let self = this;
+		document.onkeydown = function(e) {
+			//按下回车提交
+			let key = window.event.keyCode;
+			//事件中keycode=13为回车事件
+			if (key == 13) {
+				self.onSubmit();
+			}
+		};
+	},
+	mounted() {},
+	methods: {
+		onSubmit() {
+			//子组件点击查询时将表单数据发送给父组件
+			this.$emit("getSearchCondition", this.formData);
+		},
+	},
+	computed: {},
+	watch: {},
+};
+</script>
+<style scoped lang="less"></style>

 <template>
 	<div class="main">
-		<el-form :inline="true" :model="formData" class="demo-form-inline">
-			<el-form-item label="宗地编码">
-				<el-input v-model="formData.user" placeholder="输入宗地编码"></el-input>
-			</el-form-item>
-			<el-form-item label="坐落">
-				<el-input v-model="formData.user" placeholder="输入坐落地址"></el-input>
-			</el-form-item>
-			<el-form-item label="不动产单元号">
-				<el-input
-					v-model="formData.user"
-					placeholder="输入不动产单元号"
-				></el-input>
-			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" @click="onSubmit">查询</el-button>
-				<el-button type="warning" @click="onSubmit">重置</el-button>
-				<el-button type="primary" class="moreSearchBtn" @click="onSubmit"
-					>更多查询</el-button
-				>
-			</el-form-item>
-			<el-form-item class="db" label="查询范围">
-				<el-checkbox-group v-model="formData.type">
-					<el-checkbox label="宗地" name="type"></el-checkbox>
-					<el-checkbox label="自然幢" name="type"></el-checkbox>
-					<el-checkbox label="户" name="type"></el-checkbox>
-					<el-checkbox label="构筑物" name="type"></el-checkbox>
-					<el-checkbox label="林权" name="type"></el-checkbox>
-					<el-checkbox label="宗海" name="type"></el-checkbox>
-				</el-checkbox-group>
-			</el-form-item>
-		</el-form>
+		<SearchHead @getSearchCondition="getData"></SearchHead>
 		<div class="dataGrid">
 			<el-table :data="tableData" :row-class-name="tableRowClassName">
 				<el-table-column type="index" width="80" align="center" label="序号">
@@ -60,9 +30,10 @@
 </template>
 
 <script>
+import SearchHead from "../../../components/searchHead/searchHead";
 export default {
 	name: "",
-	components: {},
+	components: {SearchHead},
 	props: {},
 	data() {
 		return {
@@ -110,6 +81,12 @@ export default {
 				return "";
 			}
 		},
+
+		//获取子组件点击查询触发的事件
+		getData(obj){
+			console.log(obj);
+			//将obj作为参数调用接口查询表格数据
+		}
 	},
 	computed: {},
 	watch: {},