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？

P.S。在我看来，唯一的解决方法是修改 el 以在 bind 中附加 html 属性 "my-custom-index" 并在 unbind 中读取它。但这太老套了……

Answer 1

似乎是way to go使用html-属性:

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.

Answer 3

第一个选项是使用el.dataset来存储数据。然而，这是有限的，因为数据集只能保留字符串。我所做的是使用 el 引用作为 id 来了解哪些数据对应于什么，如下所示：

const data = []

Vue.directive('example',{
  bind: function(el, binding, vnode) {
    const index = setInterval(/* ... */) //I have an "index" here
    data.push({el, index})
  },
  unbind: function(el, binding, vnode) {
    const dataIndex = data.findIndex(item => item.el === el)
    const { index } = data[dataIndex]
    clearInterval(index) // I want to use "index" here
    data.splice(dataIndex, 1)
  }
})

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

Vue Custom Directives: how to share a variable between hooks?

javascript

vue.js

vuejs2

vue-directives