Vue 模板语法表达式的范围

Question

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

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

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

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

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

类型错误：无法读取未定义的属性“日志”

我的理解是 console在这个范围内找不到对象。（它最初是在window对象上定义的）。我想知道里面的 JavaScript 表达式的范围是什么，v-on:event="…"以及如何使用console.logVue 模板语法。

我知道我可以做与下面相同的事情。但是有没有办法在模板表达式中做到这一点？

<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 为前缀。它调用this.someHandler存在。v-bind指令中的表达式也是如此。具体来说，在文档中：

[...] 所有 Vue 处理函数和表达式都严格绑定到处理当前视图的 ViewModel [...]

和：

这些表达式将在所有者 Vue 实例的数据范围内被评估为 JavaScript。