我无法使用 vue 渲染函数来渲染 Vuetify uicomponents（v-app-bar、v-navigation-in 一个独立的 vue 组件答案

【问题标题】：I am unable to use vue render functions to render Vuetify uicomponents (v-app-bar, v-navigation-in a standalone vue component我无法使用 vue 渲染函数来渲染 Vuetify uicomponents（v-app-bar、v-navigation-in 一个独立的 vue 组件
【发布时间】：2020-10-07 18:23:30
【问题描述】：

Main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

App.vue

template>
  <v-app>
    <Navbar/>
    <div>
      <v-content  class="mx-4 mb-4">
        <router-view></router-view>
      </v-content>
    </div>
  </v-app>
</template>

<script>
import Navbar from '@/components/Navbar'

export default {
  name: 'App',

  components: {
    Navbar
  },

  data: () => ({
    //
  }),
};
</script>

Navbar.vue（当前）

<template>
  <div>
    <v-app-bar app flat color="">
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>
        <span>Sample App</span>
      </v-toolbar-title>
    </v-app-bar>
  </div>
</template>
....
....

Navbar.vue（需要）

no template because I want to use render function
<script>
export default {
...
...
  render(createElement){
    const icon = createElement('v-app-bar-nav-icon')
    return createElement('v-app-bar', [icon])
...
...
}
}

当我尝试这个时，我得到一个错误： vue.common.dev.js?4650:630 [Vue 警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

有什么建议吗？

【问题讨论】：

嗯。为什么这里需要使用渲染？
尝试为 vue 组件创建生成器。

标签： vue.js vuetify.js

【解决方案1】：

供将来参考：

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

Navbar.vue

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

export default {
  render(createElement) {
    const icon = createElement(VAppBarNavIcon)
    return createElement(VAppBar, {}, [icon]);
  },
};
</script>

更多信息请访问link。

【讨论】：