为啥在 Vue Composition API 设置函数中未定义“this”？

Posted 2023-02-22

【中文标题】为啥在 Vue Composition API 设置函数中未定义“this”？

【英文标题】：Why is "this" undefined in Vue Composition API setup function?为什么在 Vue Composition API 设置函数中未定义“this”？

【发布时间】：2020-11-12 01:46:30

【问题描述】：

我有一个使用 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() 中是未定义的，无论它是函数还是箭头函数。

【参考方案1】：

setup function in the Vue Composition API 接收两个参数：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。