我无法使用vue渲染功能来渲染Vuetify uicomponents（v-app-bar，v-navigation-独立的vue组件中的

Question

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警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

有什么建议吗？

Answer 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 上有更多信息。