vue中自定义指令声明变量

发表于 分类于 ， 阅读次数：

参考 Stack Overflow 中的问题。

场景：在 vue 自定义指令中，在 mounted 声明周期内，将传入的变量存起来，在 updated 生命周期内使用变量做其他操作。

代码如下：

1
2
3
4
5
6
7
8
import type { Directive } from 'vue';

const customDirective: Directive = {
  customeText: '',
  created(el, binding, value) {
    this.customeText = 'customeText'
  },
};

这个时候呢，就会有ts报错，浏览器控制台也会报错。

TS报错

对象文字可以只指定已知属性，并且“customerText”不在类型“Directive<any, any>”中。ts(2322)

控制台报错

TypeError: Cannot set properties of undefined (setting ‘customerText’)

那如何在Vue自定义指令中声明变量呢？官方文档

1
2
3
4
5
6
7
8
9
10
const customDirective: Directive = {
  customeText: '',
  created(el, binding, value) {
    el.dataset.customeText = 'customeText'
  },
  mounted(el, binding, value) {
    const customeText = el.dataset.customeText
    console.log(customeText) // 'customeText'
  },
};

该种方式将数据通过元素的 dataset attribute 实现，可以实现同一个元素中跨钩子的数据共享。