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

是否有一种方法可以将属性的范围限定为指令？这样做，我可以添加基础，并清除它（删除事件侦听器）当元素未绑定？< /p>

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

---

您需要使用

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来展示基本流程：

您需要使用

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来展示基本流程：

好的，这样就实现了我想要的。将属性指定给元素将完成此任务

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

---

好的，这达到了我想要的。将属性指定给元素将完成此任务

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

---

谢谢，但是如果我在一个页面上有多个使用此指令的元素，这将如何工作？因为它们都会覆盖toggler属性权限？我只需将内容保存在元素上。你能举个例子吗？如果您试图销毁分配给元素上属性的内容，它会清除事件侦听器吗？我会让@LinusBorg回答，但我猜他的意思是这样的：谢谢，但是如果我在一个页面上有多个使用此指令的元素，这将如何工作？因为它们都会覆盖toggler属性权限？我只需将内容保存在元素上。你能举个例子吗？如果您试图销毁分配给元素上属性的内容，是否会清除事件侦听器？我会让@LinusBorg回答，但我猜他的意思是这样的：