在该组件的其余部分中找不到 Vue3 设置返回的值

Question

它说“此处返回的任何内容都可用于组件的其余部分”（https://v3.vuejs.org/guide/composition-api-introduction.html#setup-component-option），但我收到此错误c 是安装程序中返回的变量：找不到名称“c”.ts(2304)。

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup(props) {
    let c = 123;
    return { c }
  },
  methods: {
    increment() {
      c;
    }
  }
})
</script>

有什么帮助吗？

Answer 1

您需要在方法中setup使用this关键字访问通过方法公开的变量。

警告：

但这只是一个糟糕的继续方式，因为你正在composition api与options api. 请参阅此线程以了解两者之间的区别。

Vue.createApp({
  setup(props) {
    let c = 123;
    return { c }
  },
  methods: {
    increment() {
      console.log(this.c);
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <button @click="increment">Increment</button>
</div>

使用Composition API实现它的正确方法：

Vue.createApp({
  setup(props) {
    const c = Vue.ref(123);
    const increment = () => c.value++;

    return {
      c,
      increment
    }
  },
}).mount('#app')

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <span>{{ c }}</span><br/><br/>
  <button @click="increment">Increment</button>
</div>