从另一个指令中动态添加 VueJS 指令

Posted 2023-02-22

【中文标题】从另一个指令中动态添加 VueJS 指令

【英文标题】：Add VueJS directive dynamically from within another directive

【发布时间】：2019-12-29 23:53:03

【问题描述】：

我想尽可能抽象出表单控件与 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 方法附加到元素的方法吗？

感谢您的帮助！

【参考方案1】：

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

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

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