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

作者：System 时间：2024年08月14日分类：所有,vue.js 字数：699

这篇文章距离上次修改已过234天，其中的内容可能已经有所变动。

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函数手动渲染它。这是一个简化的例子，演示了如何在不使用单文件组件的情况下，创建和使用全局组件。

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

评论已关闭

推荐阅读