Question

尝试以通常的方式声明变量时出现错误：

   Vue.directive('my-directive', {
        varA: '', 
        inserted: function(el, binding, vnode){
              this.varA = 'test'; // TypeError: Cannot set property 
                                  // 'varA ' of undefined
        },
    });

TypeError：无法设置未定义
的属性'varA'

如何在Vue指令中声明变量？

Answer 1

在Vue指令中，当您需要存储一个值时，它通常存储在元素上。

Vue.directive('my-directive', {
  inserted: function(el, binding, vnode){
    el.varA = 'test'; 
  },
});

元素作为参数传递给指令中的每个生命周期事件，您可以稍后从el.varA访问该值。

Answer 2

似乎有两种方法：

根据此comment on github，您可以定义如下的有状态指令：

Vue.directive('my-directive', (() => {
    let varA = '';
    return {
        inserted: function(el, binding, vnode){
            varA = 'test'; 
        },
    };
})());

根据Vue.js docs上的注释框：

如果您需要跨钩子共享信息，建议通过元素的dataset进行共享。

Vue.directive('my-directive', {
    inserted: function(el, binding, vnode){
        el.dataset.varA = 'test'; 
    },
});

Answer 3

您的this不是您认为的那样。如果您在函数内部console.log(this)，则会看到this是窗口。

查看the doc，指令适用于'......只需要对普通元素进行低级DOM访问的情况'。所以没有规定指令有国家。我怀疑你需要一个组件，而不是一个指令。你想做什么？你可以在vue中走很长的路，而不需要编写指令。

如何在自定义VueJS指令中声明变量？

3 个答案: