vue里的directive中的钩子函数的上下文(this)问题

这段有关vue2.0 directive的代码

someDirective.js

export default {
    a: 'xxx',
    bind (el, binding) {
      console.log(this.a);
    }
 }
useDirective.vue

import SomeDirective from 'someDirective.js';
export default {
  directives: {
    SomeDirective
  },
  ....
}

会报未找到this的错误,
bind函数的上下文难道不是export default的对象,
如果不是,为什么?

阅读 13.7k
6 个回答

via: http://geocld.github.io/2016/...

总结一下Vue.js 2.0指令的注意事项:

  1. 指令中没有this关键字

  2. 指令中通过el可以直接拿到指令绑定的元素;

  3. 需要传递回调函数及其他参数,统一通过对象字面量的形式传递

  4. update钩子会触发当前所有已绑定的元素,而不管该元素有没有更新值。

获取vue的上下文即可

    drag(el, binding, vnode) {
      // vue上下文
      let _this = vnode.context;
     }

一般不这么定义变量。
你可以定义在上面,然后export default里去引用这个定义的对象。

  1. 定义的有问题, 看一下文档

clipboard.png
我这边this也是undefined

export default {
    name: 'myDirective',
    a: 'xxx',
    bind(el, binding) {
        console.log(binding.def.a)
    }
}

通过binding.def可以拿到a

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题