19.混合使用选项和组合API需要注意哪些

Posted 2022-09-14 @大迁世界

在 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 中返回的属性。