在 Vue3中,我们可以混合使用选项 API 和组合API,不过需要注意几点:
首先,不能在 setup
函数中访问 选项API中声明的属性。
啥意思呢,我们来看个例子,假设我们有一个 User
组件:
// User.vue
<template>
<div>child 组件</div>
</template>
<script>
export default {
data() {
return {
userInfo: {
name: '王大冶',
},
}
},
setup() {
console.log(this.userInfo.name)
},
}
</script>
在 User 组件中,我们声明一个 userInfo
对象,然后在 setup
我们打印 UserInfo.name
的值,如果运行,控制会报错,如下所示:
这里因为,在 setup
函数中, 我们不能访问选项 API 中的属性,也不能使用 this
。
第二,可以在 选项API 中访问从 setup
中返回的属性。