vue3 页面获取props ts报错

如果你在使用 Vue 3 时遇到了获取 props 报错的问题，可能是因为你没有正确声明组件的 props 类型。

在 Vue 2 中，我们可以通过 `props` 属性来声明组件的 props 类型，如下所示：

export default {
  name: 'MyComponent',
  props: {
    propA: String,
    propB: {
      type: Number,
      default: 100
    }
  }
}

但在 Vue 3 中，`props` 属性已被移除，我们需要使用 `defineProps` 函数来声明组件的 props 类型。这个函数接收一个对象参数，对象属性即为 props 名称，属性值即为 props 类型：

import { defineComponent, defineProps } from 'vue'

const props = defineProps({
  propA: String,
  propB: {
    type: Number,
    default: 100
  }
})

export default defineComponent({
  name: 'MyComponent',
  props,
  setup(props) {
    // ...
  }
})

需要注意的是，在 `setup` 函数中，我们需要使用 `props` 参数来访问组件的 props，而不是 `this.$props`。