vue组件化的概念

vue组件化一般分为三种,一种是页面级别的组件,这个一般写在views文件夹下面,然后配合路由去使用,根据路由显示每个页面,一种是可以复用的组件,这个是作为标签的形式配合插槽等方法让一个组件能在多个路由页面中进行使用,增强代码的复用,减少了代码的冗余,能大大减少开发量,最后一种是一些是封装好了的与业务逻辑没什么关联的组件比如好看的按钮,flex布局等等,本文中介绍的是可复用的组件介绍,剖析一下elementUI里面的组件是怎么封装的。

剖析element的表单组件

这是elementUI里面的表单组件,是一个实现能够校验加显示样式的一个表单,这里我们就用自己的思路去重写这个组件

  <el-form :model="model" :rules="rules" ref="loginForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="model.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password">
            <el-input type="password" v-model="model.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
          </el-form-item>
   </el-form>

下面的参数

 data() {
    return {
      value:'',
      model: { username: "tom", password: "" },
      rules: {
        username: [
          { required: true, message: "请输入用户名" },
          {min: 6,max:10,message:'请输入6~10的用户名'}
        ],
        password: [
          { required: true, message: "请输入密码" }
        ],
      }
    };
  },
  methods: {
      submitForm(form) {
          this.$refs[form].validate(valid=>{
              if (valid) {
                  alert('请求登录!')
              } else {
                  alert('校验失败!')
              }
          })
      }
  },

先分析这个页面 rules里面传输的是校验规则 应该是在el-form组件中通过props去接收然后通过provide传给子组件,子组件通过inject去接收这个规则,然后在el-form-item使用async-valuedator去校验这个规则,但是怎么触发校验的方法呢,肯定是在el-input里面有一个@input事件,这个事件触发时候不仅会触发事件修改最外层组件里面注册在自己标签上的自定义事件修改数值达到双向绑定的目的,并且还要去触发$parent父组件里面的事件进行数值校验,并且返回数值修改这个组件里面的提示信息等。

Last modification:October 13, 2019
If you think my article is useful to you, please feel free to appreciate