自定义指令如何修改vmodel绑定的值

今天想做这样一件事 给 input 添加验证功能 本来是想做成能依赖正则表达式时时修正的（很尴尬 没整出来）结果就只能做成 blur 后再验证 然后验证没过就清空 听着狠简单 其实奥妙的狠 上代码
.vue

<input type="text" v-model="mobile" v-validate="'手机号'" />

directive.js

import Vue from 'vue'

const validate = {'手机号': function (s) {return /^1[0-9]{10}$/.test(s)
    }
}
Vue.directive('validate', {bind: function (el, binding, vnode) {
        const key = binding.value
        const isMobile = validate[key]
        el.addEventListener('blur', function () {if (!isMobile(this.value)) {this.value = ''el.dispatchEvent(new Event('input')) // 这个是点睛之笔
                alert(`${key}格式不正确 `)
            }
        })
    }
})

如果没写这句 el.dispatchEvent(new Event(‘input’)) 单单写了 this.value = ” 虽说页面效果是有了 但其实 data 里定义的 mobile 是没变的
那为什么写了这句 el.dispatchEvent(new Event(‘input’)) 就可以改变 data 里定义的 mobile 呢？
原因是因为 v -model 就是一个语法糖

<input type="text" v-model="mobile" v-validate="'手机号'" /> 
<input type="text" :value="mobile" @input="mobile = $event.target.value" />

上面两句是等价的
所以想真正的改变 data 里定义的 mobile 就需要手动触发 input 事件 才可以执行这句 mobile = $event.target.value 才能真正的达到效果
基本就这样