typescript - 如何在VueJS 3.0 中使用defineComponent 注册本地组件

Question

VueJS 3.0 提供了定义组件的新语法
( https://v3.vuejs.org/api/global-api.html#arguments-3 )。

import { defineComponent, ref } from 'vue'

const HelloWorld = defineComponent(function HelloWorld() {
  const count = ref(0)
  return { count }
})

如何使用传递函数在本地注册组件 defineComponent ?
在旧样式中，您将使用 components 组件定义对象中的字段，如下所示:

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
  // ...
}

Answer 1

您可以像以前一样简单地将该组件添加到 components 中。选项 :

import ComponentA from './ComponentA.vue'

export default defineComponent({
    setup() {
        const count = ref(0)
        return { count }
    },

    components: {
        ComponentA 
    }
});

LIVE DEMO