首先创建一个vue文件用来写组件。 如下
<!-- 完善个人信息组件 --> <template> <div> <el-dialog :title="title" :visible.sync="queryDialog" width="800px"> <el-form label-width="80px" :rules="rules" ref="userInfo" :model="userInfo"> <div class="allInput"> <el-row> <el-col :span="12"> <el-form-item label="姓名" prop="name"> <el-input v-model="userInfo.name"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="性别" prop="gender"> <el-select v-model="gender" placeholder="请选择" style="width:100%"> <el-option v-for="item in options" :key="item.gender" :label="item.label" :value="item.gender" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="身份证号" prop="idenno"> <el-input v-model="userInfo.idenno"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="出生日期" prop="birthday"> <el-date-picker v-model="userInfo.birthday" type="date" placeholder="选择日期" ></el-date-picker> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="邮箱" prop="email"> <el-input v-model="userInfo.email"></el-input> </el-form-item> </el-col> </el-row> </div> </el-form> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="userInfoSave">确 定</el-button> <el-button type="info" icon="el-icon-info" :plain="true" @click="resetform('userInfo')">重置</el-button> <el-button type="primary" @click="closeUserInfo">取 消</el-button> </span> </el-dialog> </div> </template> <script> export default { props: { //向外props需要显示的和需要传递的对象或者数组 如果是数组则为Array userInfo: { type: Object, default() { return {}; } }, //显示标题内容，由于不确定标题内容是否为固定内容。所以我们还是写成动态的 title:{ type:String, default(){ return '' } }, //操控弹出框的 queryDialog:{ type:Boolean, default(){ return false } } }, data() { return { options: [ { gender: "M", label: "男" }, { gender: "F", label: "女" } ], gender: "", rules: { name: [ { required: true, message: "请输入您的姓名", trigger: "blur" }, { min: 2, max: 5, message: "请输入正确的姓名", trigger: "blur" } ], gender: [ { required: true, message: "请选择您的性别", trigger: "blur" } ], birthday: [ { type: "date", required: true, message: "请选择您的出生日期", trigger: "blur" } ], idenno: [ { required: true, message: "请输入身份证号", trigger: "blur" }, { pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "证件号码格式有误！", trigger: "blur" } ], email: [ { required: true, message: "请输入您的邮箱", trigger: "blur" }, { pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/, message: "邮箱格式错误", trigger: "blur" } ] } }; }, components: {}, computed: {}, methods: { //点击事件需要向父进行传递 userInfoSave(item){ console.log(item); this.$emit('userInfoSave',item); }, closeUserInfo(item){ console.log(item); this.$emit('closeUserInfo',item); }, resetform(item){ this.$emit('resetform',item); } }, watch:{ //监听选择性别的数值状态 gender(newVal){ this.userInfo.gender=newVal } } }; </script> <style lang='less' scoped> </style>接下来就是在页面中引用了
//用驼峰命名法 然后再注册一下组件 import verifiCation from "@/components/verification"; components: { verifiCation },在页面中引用就需要这样用
<verifi-cation :userInfo="userInfo" @userInfoSave="userInfoSave" @resetform="resetform" title="完善信息" @closeUserInfo="closeUserInfo" :queryDialog="queryDialog"></verifi-cation>提交按钮：userInfoSave这样的函数需要自己在页面中写，因为调用接口不一样所以区分开写成动态的。
