我试图动态创建一个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按钮已正确呈现。