如何将 vuetify 组件正确地动态传递到 vueJs 组件中

Posted 2023-02-23

【中文标题】如何将 vuetify 组件正确地动态传递到 vueJs 组件中

【英文标题】：How to pass vuetify components correctly into vueJs component dynamically

【发布时间】：2020-10-29 17:58:11

【问题描述】：

我的数据中有这个；

data()
    text: 'Go to <v-btn> to="profile">Profile</v-btn>'

现在我需要使用组件中的 html 来呈现它。我试过用这个 <div v-html="text"></div> 但它不会渲染。这样做的正确方法是什么。

【参考方案1】：

我认为这可能会对您有所帮助。 v-btn 多了一个>。

<div>
   Go To<v-btn :to="name:'nameofcomponent'">Profile</v-btn>
</div>

组件的名称将是您在路由中为组件定义的名称。 例如：

 path: "/profile",
 name: "profile",
 component: () => import("path to profile file")
,

【讨论】：

谢谢。 nameofcomponent 会指向什么？

我已经在 route.js 上设置了路线，并且可以正常工作。我的问题是我想将数据对象动态传递到我的组件中。但是，数据包含 vuetify 组件（v-btn），它应该在我的组件内被解析为 HTML 标记，因此它与 v-btn 一起呈现组件呈现为按钮。

【参考方案2】：

正如docs 中所说，您不能使用v-html 编写模板，并且容易受到XSS 攻击。

如果你想编译模板，你可以使用v-runtime-template，这将接受你的模板并编译它以显示vuetify组件。

【讨论】：

我正在尝试将数据输出为真正的 html，您让我确认可以使用 v-html 的部分。它适用于传统的 html 标签，如 和 。但是，它不会渲染像 ​​​​

这样的 vuetify 组件

没错！ v-html 只会渲染标签而不编译它。任何数据绑定也不起作用

我向您推荐了一个 npm 包 v-runtime-template，并且我已经测试了您的案例它是否有效。