Vue 自定义指令没有'this'上下文/这是未定义的

Question

我试图创建一个基本的Vue指令，但在访问this时遇到问题。在这种情况下，我没有使用箭头函数，并且直接从Vue文档中举了一个例子，但我仍然遇到这个问题。

可复制：https://codesandbox.io/s/suspicious-lichterman-forud

Vue:v2.6.11

指令：

// When bound produces `undefined` from console.log
// I've tried placing this in main.js / App.vue
Vue.directive("example", {
twoWay: true, // I've tried setting this false / true
bind: function() {
console.log(this);
},
unbind: function() {
console.log("unbind", this);
}
});

Answer 1

您正在引用v0.12文档，但您的示例使用当前版本的Vue(v2.6.11(。从用于绑定的2.x文档来看，bind的API有所不同：

Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: '       + s(binding.name) + '<br>' +
'value: '      + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: '   + s(binding.arg) + '<br>' +
'modifiers: '  + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})

在2.x中，通过this可访问的数据现在作为挂钩参数(即el、binding和vnode(传递。此外，2.x中不再存在twoWay，因为您可以在不指定任何道具的情况下使用Vue.set()。

更新的Codesandbox