Vue自定义指令:如何在钩子之间共享变量？

Question

我想在自定义指令的钩子之间共享一个变量。

示例：

Vue.directive('demo',{
  bind: function(el, binding, vnode) {
    const index = setInterval(/* ... */) //I have an "index" here
  },
  unbind: function(el, binding, vnode) {
    clearInterval(index) // I want to use "index" here
  }
})

如何将值从bind传递到unbind

附注:在我的脑海中唯一的解决办法是修改索引，在bind中附加一个html属性“my - el -index”，并在unbind中读取它。但它太老土了.

Answer 1

它似乎是一个使用html属性的way to go：

Vue.directive('demo',{
  bind: function(el, binding, vnode) { 
    //save
    el.setAttribute('x-my-attr', index);
  },
  unbind: function(el, binding, vnode) {
    //read
    const index = el.getAttribute('x-my-attr'); // The value is a string!
  }
})

Answer 2

指令定义所在的位置必须在JS模块中。那么为什么不在模块中定义你的变量呢？然后在模块作用域中的任何位置读写它。

像这样：

let va = 9
Vue.directive('demo',{
  bind: function(el, binding, vnode) {
    va = va + 1
    const index = setInterval(/* ... */) //I have an "index" here
  },
  unbind: function(el, binding, vnode) {
    console.log(va)
    clearInterval(index) // I want to use "index" here
  }
})

或者，您可以使用this.va = 'covid-19'和var va = this.va。

或者el.dataset。