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

【问题标题】：Vue Custom Directives: how to share a variable between hooks?Vue 自定义指令：如何在钩子之间共享变量？
【发布时间】：2020-05-07 10:52:39
【问题描述】：

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

例子：

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？

附：我认为唯一的解决方法是修改el，以便在bind 中附加一个html 属性“my-custom-index”并在unbind 中读取它。但这太 hacky ...

【问题讨论】：

我同意这很hacky，但它也是推荐的方法。见vuejs.org/v2/guide/…。 Quote: '如果需要跨hook共享信息，建议通过element的dataset来实现。'
@skirtle 嗯，我在文档中错过了这一点。我想你的评论应该是一个答案））
并不是一个真正的解决方法，因为指令没有自己的实例并且不一定对应于 comp 实例，在 el 上共享数据是合理的。请注意，数据集是字符串，最好将其存储为 el 属性以保留数字。

标签： javascript vue.js vuejs2 vue-directives

【解决方案1】：

使用html-attributes好像是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!
  }
})

【讨论】：

【解决方案2】：

第一个选项是使用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)
  }
})

【讨论】：

【解决方案3】：

指令定义所在的位置必须在 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。

【讨论】：

如果您在同一页面上多次使用该指令会怎样？
是的，使用全局是错误的方法，你需要一个每个指令上下文