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指令中的表达式也是如此。具体来说，在the documentation中：

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

And：

这些表达式将在所有者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>

Vue模板语法表达的范围

2 个答案: