Vue directive中修改v-model值

javascript.shop

发布于 2019-11-13 05:57:25

2.9K00

代码可运行

文章被收录于专栏：杰的记事本杰的记事本

运行总次数：0

代码可运行

最近在重构一个旧项目，这个项目用到了一些bootstrap的插件，我们想保留这些插件，就会遇到一些问题，比如我们把插件封装成了directive，在双向绑定方面需要做如下处理：

<div v-custom= “customData”>Test</div> ，我们想要在directive中，对customData进行改变，可以使用 vnode.context[binding.expression]进行赋值即可，如下例子：

 Vue.directive("custom", {
  bind: function(element, binding, vnode) {
    $(element).on("click", function() {
      vnode.context[binding.expression] = false; // sync binding.value = false;
    });
  }
});

2. <input v-model=”customValue” v-custom= “customData”></> ，我们知道v-model其实是input事件改变value的语法糖，所以我们想要在directive中对v-model进行改变，可以使用dispatchEvent(‘input’)的方法，如下例子：

 // 这个函数是从vue.js源码中复制的，方便我们手动触发事件
function trigger(el, type) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(type, true, true);
    el.dispatchEvent(e);
  }
 Vue.directive("custom", {
  bind: function(element, binding, vnode) {
    $(element).on("focus", function() {
       element.value = 'FOCUS';
       trigger(element, "input");
    });
   }
});