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

最新推荐文章于 2024-11-11 17:39:05 发布

热心网友!

最新推荐文章于 2024-11-11 17:39:05 发布

阅读量410

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue组件

本文链接：https://blog.csdn.net/weixin_44128575/article/details/102869449

本文介绍了一个使用Vue.js创建的个人信息组件，包括姓名、性别、身份证号等字段的输入与验证，以及如何在页面中引用该组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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