1

我想尽可能地抽象表单控件到 vuejs 的绑定。这个想法是创建一个指令，该指令将绑定跟踪表单字段发生的情况所需的所有事件。

所以不要这样做：

<input type="text" name="firstName" 
v-model="form.firstName.value" 
@blur="form.firstName.onBlur" 
@focus="form.firstName.onFocus" 
@change="form.firstName.onChange"
[...]
 />

只需这样做：

<input type="text" name="firstName" v-form-control="form.firstName" />

让指令发挥作用。

但我找不到从指令中向输入添加指令的方法FormControl。

我可以做这样的事情：

Vue.directive('form-control', {
    bind: function(el: HTMLElement, binding: DirectiveBinding) {
        const formControl: FormControl = binding.value;
        el.addEventListener('input', (event) => {
            formControl.updateValue(event.target.value);
        });
    },
});

但是这样下去我从 VueJS 中损失了很多。我手动附加了一个input不太兼容的事件，并且肯定会比v-model指令更频繁地失败。

你知道一种将原始 vue 指令和事件从指令的方法附加到元素的bind方法吗？

谢谢你的帮助！

4

1 回答 1

0

最初的 Vue 指令实际上是事件处理程序。:value=".."V-model 是围绕and的语法糖@input=".."。

因此，继续为常规 dom 事件（输入、模糊、焦点、更改）附加事件侦听器

为了被 JavaScript 运行时理解，Vue 指令被翻译成常规的事件监听器——它们在运行时不存在，因此，你不能在运行时动态地使用它们的语法。

于 2019-08-25T20:33:19.633 回答