vue组件化（文本显示，事件传递，以及父子组件传值）

向右看齐 2023-05-29 03:07 12阅读 0赞

首先创建一个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这样的函数需要自己在页面中写，因为调用接口不一样所以区分开写成动态的。