Vue模板语法表达式的作用域

Question

在我的Vue.js应用程序中，子组件以以下格式发出事件：

this.$emit('done-editing', payload)

我的父组件是以以下方式设计的：

<child-component
v-on:done-editing="console.log(data)">
</child-component>

但当我执行这个代码时，它会抛出一个错误，说

TypeError:无法读取未定义的属性"log">

我所了解的是，在此范围内找不到console对象。(它最初是在window对象上定义的(。我想知道v-on:event="…"中JavaScript表达式的作用域是什么，以及如何在Vue模板语法中使用console.log。

我知道我可以做下面同样的事情。但是有没有一种方法可以在模板表达式中实现呢？

<template>
<child-component
v-on:done-editing="logMethod(data)">
</child-component>
</template>
<script>
methods :  {
logMethod(data) {
console.log(data)
}
}
</script>

Answer 1

v-on指令中的每个处理程序都是"与此绑定"；。这意味着，当你尝试做：

v-on:some-event="console.log('test')"

你实际上在做：

this.console.log('test')

无效，因为this指向Vue组件实例。这就是为什么你可以这样做：

v-on:some-event="someHandler"
…
methods: {
someHandler() { … }
}

因为v-on指令中的表达式会自动加上此前缀。它调用存在的this.someHandler。v-bind指令中的表达式也是如此。具体而言，在文档中：

〔…〕所有Vue处理程序函数和表达式都严格绑定到处理当前视图的ViewModel〔…〕

和：

这些表达式将在所有者Vue实例的数据范围中作为JavaScript进行评估。

Answer 2

我写了一个Vue插件，这样你就可以在模板中使用$window和$document。

https://www.npmjs.com/package/window-plugin

这将在你安装插件后工作：

<child-component
v-on:done-editing="$window.console.log(data)">
</child-component>