如何在 Composition API 中访问 Option API 的数据、计算属性和方法，反之亦然？

Question

是否有任何方法可以在同一Vue单一文件组件(SFC(中访问Option API的数据、计算属性、Composition API中的方法以及Composition API的数据、计算属性和Composition API中的方法

Answer 1

将API组合为同一组件中的选项API

正如@tauzN所回答的，您可以从Composition API中的设置返回任何内容，并在Options API中使用。参见@tauzN的答案以获取代码示例

在同一组件中组合API的选项API

正如Vue js官方文件所建议的那样，

请注意，Composition API的setup((钩子在任何Options API钩子之前调用，甚至在Create((之前调用。链路

因此，我们无法访问从Composition API到Option API的数据、计算属性或方法。

Answer 2

您可以从Composition API中的setup返回任何内容，并在Options API中使用。游乐场

<script>
import { ref } from 'vue'
export default {
setup() {
const compositionRef = ref("Composition")
return {
compositionRef
}
},
data () {
return {
optionsRef: "Options"
}
},
computed: {
inOptionsFromComposition () {
return this.compositionRef
}
}
}
</script>
<template>
<h1>{{ compositionRef }}</h1>
<h1>{{ optionsRef }}</h1>
<h1>{{ inOptionsFromComposition }}</h1>
</template>