时间戳

首页 > 解决方案 > 为什么在 Vue Composition API 设置函数中未定义“this”？

javascript - 为什么在 Vue Composition API 设置函数中未定义“this”？

问题描述

我有一个使用 v3 组合 API 的 Vue 组件：

<template>
  <input type="checkbox" v-model="playing" id="playing" @input="$emit('play', $event.target.value)" />
  <label for="playing" >{{ playing ? 'Pause' : 'Play' }}</label>
</template>
<script>
export default {
  props: {
    done: Boolean
  },
  setup(props) {
    const playing = ref(true)
    watchEvent(() => {
      if (props.done) {
        playing.value = false
        this.$emit('play', playing.value)
      }
    }
    return { playing }
  }
}
</script>

当 watchEvent 运行时，我收到错误消息Cannot read property "$emit" of undefined。看起来我没有使用错误类型的函数（箭头与正常函数）。

无论是函数还是箭头函数，它似乎this始终是未定义的。setup()

标签： javascriptvue.jsvuejs3vue-composition-api

解决方案

Vue Composition API 中的setup 函数接收两个参数：props 和 context。

第二个参数提供了一个上下文对象，它公开了先前在 2.x API 中公开的属性的选择性列表：

const MyComponent = {
  setup(props, context) {
    context.attrs // Previously this.$attrs
    context.slots // Previously this.$slots
    context.emit // Previously this.$emit
  }
}

重要的是要注意，解构 props 是不行的（你会失去反应性），但是解构上下文是可以的。

所以问题中的代码示例，使用setup(props, { emit })然​​后替换this.$emit为emit.

推荐阅读