如何在不导入的情况下使用JSX/TSX中的全球注册组件

VButton已经全局注册，可以直接在SFC<template>中使用，如果不在JSX/TSX中手动导入，如何使用它？

// globally register `VButton`
Vue.createApp({...}).component('VButton', {...})

// 👇 have to import this, is there a way to
// use `VButton` without importing, since it's
// already registered globally.
import VButton from '@/components/VButton.vue'
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
return () => <VButton>Click Me</VButton>
},
})

Vue从React中借用了render函数和JSX，代码应该以相同的方式编写，即显式导入组件中使用的组件。组件是变量，为了作为VButton访问，它们需要导入或声明为window上的全局变量。

注册的全局组件可以在Vue 2:中的全局Vue实例上访问

const VButton = Vue.options.components.VButton;

或者来自Vue 3:中的组件实例

const instance = getCurrentInstance();
const VButton = instance.appContext.components.VButton;

这些方法没有记录在案。

Vue 3中的官方方式是使用resolveComponent:

const VButton = resolveComponent('VButton');

它们都不会导致TSX的组件类型正确。

好吧，我没想到在全局注册后使用VButton会直接开箱即用。

import { defineComponent } from 'vue'
export default defineComponent({
setup() {
//           👇 just use it
return () => <VButton>Click Me</VButton>
},
})

相关内容

最新更新

热门标签：