我试图动态创建一个Vue 3应用程序，其中的组件由名称指定，例如“div”、“button”或Quasar的“q-btn”。但我很难将后者传递给Vue的渲染函数Vue.h：
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/quasar@2.10.0/dist/quasar.prod.css" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.10.0/dist/quasar.umd.prod.js"></script>
<script>
const app = Vue.createApp({
render: () => Vue.h("q-btn", { color: "blue" }, "Click me"),
});
app.use(Quasar);
app.mount("#app");
</script>
</body>
</html>我希望Vue将q-btn转换为<button>标记，但结果HTML包含浏览器无法正确呈现的<q-btn>标记。
当用Quasar.QBtn替换"q-btn"时，它可以正常工作。但是，在Quasar安装了app.use(Quasar)之后，Vue难道不应该知道如何渲染“q-btn”吗？
我可以找到一些hacky解决方案来处理Quasar组件，但会有其他库以及自定义组件，我希望有一个更通用的解决方案。
1条答案
按热度按时间vuv7lop31#
哦，我想我用
Vue.resolveComponent找到了答案：现在Quasar按钮已正确呈现。