Vue 渲染函数和 Vuetify ui 组件答案

【问题标题】：Vue Render Functions and Vuetify ui componentsVue 渲染函数和 Vuetify ui 组件
【发布时间】：2020-06-14 21:42:45
【问题描述】：

是否可以在Vue 渲染函数中使用vuetify uicomponent，如v-app-var、v-navigation-drawer 等：

render(createElement) {
    return createElement('v-app-bar', {}, )

【问题讨论】：

可能。你试过了吗？
我做了，很抱歉没有发布代码。问题是，如果您在 vue 组件中使用渲染，则找不到 vuetify uicomponents。

标签： vue.js vuetify.js render

【解决方案1】：

是的，例如，您可以渲染v-app-bar 及其内容，例如..

render(createElement){
  const icon = createElement('v-app-bar-nav-icon')
  const spacer = createElement('v-spacer')
  const iconBtn = createElement('v-icon', 'mdi-heart')
  const btn = createElement('v-btn', [iconBtn])
  return createElement('v-app-bar', [
    icon, spacer, btn
  ])
},

演示：https://codeply.com/p/mWDDrjgKj1

【讨论】：

谢谢，如果您在组件中，则对 Vuetify 插件 'vuetify: new Vuetify()' 的引用不起作用，在导出默认块中，'export default { vuetify: new Vuetify, ...}'。这只能在定义新的 Vue 实例时完成吗？
我已经发布了一个澄清问题，我这是在一个独立的 vue 组件中。

【解决方案2】：

供将来参考：

您只需手动将其导入到 vue 组件中。

<script>
import { VAppBar } from "vuetify/lib";

export default {
  render(createElement) {
    return createElement(VAppBar, {});
  },
};
</script>

更多信息请访问link。

【讨论】：