Element自定义组件的双向绑定和表单验证

·  阅读 191
Element自定义组件的双向绑定和表单验证

button组件还可以双向绑定,自定义组件也可以进行表单校验,当然了,element的表单验证是那么好用的,我们自定义的组件想向el-input等组件一样,肯定行的,今天就分享具体的实现

我想二次封装el-button组件,我还想双向绑定,我还想进行表单校验?可能吗,是可能的,先封装个button组件

1.组件的双向绑定

<template>
    <el-button @click="clickHandle">{{ name }}</el-button>
</template>
<script>
export default {
    model: {
        prop: 'name',
        event: 'change'
    },
    props: {
        name: Number
    },
    data() {
        return {
            count: 1
        };
    },
    methods: {
        clickHandle() {
            this.count++;
            let value = this.name + this.count;
            this.$emit('change', value);
        }
    }
};
</script>
复制代码

我们实验一下这个组件有没有效果,引入这个组件vc-button组件,并进行双向绑定

<template>     <vc-button v-model="name"></vc-button>     <el-button @click="clickHandle">改变大小</el-button>

</template><script>
import VcButton from './vc-button';export default {    components: {        VcButton    },
    data(){
        return {
           name:0
        }
    },
    methods: {        clickHandle() {            this.name = 2        }    }
</script>
复制代码

结果:

点击vc-button值在往上累加

点击el-button组件改变name值=2

这个说明啥,说明双向绑定成功了,感觉有点怪是吧,双向绑定不应该是表单组件想input checkbox那样的组件吗,No,只要你想都可以双向绑定,而举这个例子就是想告诉大家,双向绑定不是input的专利,不要局限自己的思维

2.表单验证

我们经常会遇到表单验证的情况,可表单就那几个,很多情况是我们自定义的组件,还有一些是我们二次封装的组件,很想和el-input这样的校验一样写个rule就可以了,这样即可以保持页面的整体一致,浑然天成

先写代码,给我们刚写的组件加入表单验证

<template>    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">        <el-form-item label="活动区域" prop="name">            <vc-button v-model="ruleForm.name"></vc-button>        </el-form-item>        <el-button @click="clickHandle">校验</el-button>    </el-form></template><script>import VcButton from './vc-button';export default {    components: {        VcButton    },    data() {        const validateName = (rule, value, callback) => {            if (value < 1) {                callback(new Error('你小了'));            } else if (value < 20) {                callback();            } else {                callback(new Error('你咋那么大'));            }        };        return {            ruleForm: {                name: 0            },            rules: {                name: [{ validator: validateName, trigger: 'change' }]            }        };    },    methods: {        clickHandle() {            this.$refs['ruleForm'].validate((valid) => {                if (valid) {                    this.$message.success('我成功了');                } else {                    this.$message.success('我没通过校验!');                    return false;                }            });        }    }};</script>
复制代码

点击校验就是这个样子,可以校验啊,没毛病啊

确实是可以的,但这个只有在点击校验的时候才会去校验,那我想改变值得时候校验呢?

值变化了,但是提醒还是在,咋整?

看看elementui的官方的github中el-input的实现,一个是失去焦点的事件,一个是当值改变时的事件

dispatch('ElFormItem', 'el.form.blur', [this.value])

dispatch('ElFormItem', 'el.form.change', [val]);

是不是看到这个很有感觉,表单验证rules中的trigger取值是不是就这

 handleBlur(event) {this.focused = false;        this.$emit('blur', event);        if (this.validateEvent) {          this.dispatch('ElFormItem', 'el.form.blur', [this.value]);        }      },

 value(val) {        this.$nextTick(this.resizeTextarea);        if (this.validateEvent) {          this.dispatch('ElFormItem', 'el.form.change', [val]);        }      },
复制代码

在vue1.0中有这个dispatch,dispatch,和broadcast,vue2之后就抛弃了,用官方的话说就是:

因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦。并且 dispatchdispatch 和 broadcast 也没有解决兄弟组件间的通信问题。

那elementui 为什么借鉴这个实现呢?

大家可以看一下github上的源码

github.com/ElemeFE/ele…

首先先引入

import dispatch from 'element-ui/lib/mixins/emitter.js';

然后混入

mixins: [dispatch]

好了下面就可以直接使用dispatch了

改一下vc-button这个自定义组件

  clickHandle() {            this.count++;            let value = this.name + this.count;            this.$emit('change', value);            this.dispatch('ElFormItem', 'el.form.change', [value]);        }
复制代码

来吧,见证一下奇迹:

你点击按钮就会发现,变了,验证有效果了

今天就介绍到这,掘金说我写多了,保存不了,删了一部分,全选粘贴后排版就成这样了,说实话,这个掘金编辑器真的不太好用,尤其这个代码编辑器,将就吧,喜欢就点个赞,关注一下,谢谢

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改