vue3 defineComponent + 渲染函数h + 全局注册​

import { h, defineComponent, render } from 'vue';
 
// 定义一个全局组件
const MyGlobalComponent = defineComponent({
  props: {
    msg: String
  },
  setup(props) {
    return () => h('div', props.msg);
  }
});
 
// 全局注册组件
app.component('MyGlobalComponent', MyGlobalComponent);
 
// 创建一个Vue实例并挂载到#app元素
const app = Vue.createApp({});
const root = document.createElement('div');
root.id = 'app';
document.body.appendChild(root);
 
// 使用渲染函数手动渲染组件
const vnode = h(MyGlobalComponent, { msg: 'Hello Vue 3!' });
render(vnode, root);

这段代码展示了如何在Vue 3中使用defineComponent定义一个组件，并使用渲染函数h来创建虚拟节点。然后，我们将这个全局组件注册到Vue实例上，并使用render函数手动渲染它。这是一个简化的例子，演示了如何在不使用单文件组件的情况下，创建和使用全局组件。