如何在defineComponent 3.0中注册本地组件

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 
    }
});

现场演示