Question

有没有办法将属性范围扩展到指令？这样的东西，所以我可以添加基础，并在元素未绑定时清除它（删除事件监听器等）？

Vue.directive('toggler', {
  inserted(el) {
    this.toggler = new Foundation.Toggler($(el)); 
  },
  unbind() {
    this.toggler.destroy();
  },
});

Answer 1

好的，所以这可以实现我想要的。将属性分配给元素可以完成工作。

Vue.directive('f-toggler', {
  inserted(el) {
    /* eslint-disable no-param-reassign */
    el.fToggler = new Foundation.Toggler($(el));
  },
  unbind(el) {
    el.fToggler.destroy();
  },
});

Answer 2

您需要使用vnode.context来访问Vue实例上的数据属性：

Vue.directive('toggler', {
  inserted(el, binding, vnode) {
    vnode.context.toggler = new Foundation.Toggler($(el)); 
  },
  unbind(el, binding, vnode) {
   vnode.context.toggler.destroy();
  },
});

这是一个显示基本过程的JSFiddle：https://jsfiddle.net/dv5n39ta/

如何将属性范围限定为Vue.js中的自定义指令？

2 个答案: