如何在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

您可以像以前一样简单地通过将该组件添加到componentsoption 来完成此操作：

import ComponentA from './ComponentA.vue'

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

    components: {
        ComponentA 
    }
});

现场演示