vuetifyjs render 无法解析v-btn

Question

无法解析 v-btn 类似这样的 标签 但是 p 可以正常执行, 我的理解为 原生的html 元素 都可以被解析, 但是ui库的组件就不行. 有什么好的解决办法

 

<!--
  - Copyright (c) 2021 li.siyuan
  -->

<template>
  <div>
    <v-row>
      <v-col cols="6">
        <LsyCard :title="'测试页面'">
          <my-field v-for="index in 5" :key="index" :tag="'v-btn'">
            {<!-- -->{ index }} Hello world!
          </my-field>
        </LsyCard>
      </v-col>
    </v-row>
  </div>
</template>

<script>
  import LsyCard from '@/views/content/Card.vue';

  export default {
    name: 'TestRender',
    components: {
      LsyCard,
      MyField: {
        props: {
          tag: {
            type: String,
            required: true
          }
        },
        render: function (createElement) {
          return createElement(
            //this.tag, // tag name 标签名称
            //'p', //标签名称
            'v-btn', //标签名称
            this.$slots.default // 子组件中的阵列
          );
        }
      }
    },
    mounted() {
    },
  };
</script>

Answer 1

已找到解决办法

<!--
  - Copyright (c) 2021 li.siyuan
  -->
<template>
  <div>
    <my-btn />
  </div>
</template>

<script type="text/jsx">
  import { VMenu, VList, VListItem, VBtn } from 'vuetify/lib';


  export default {
    name: 'Audio',
    components: {
      myBtn: {
        render(h) {
          return h(VBtn,'hahahahh');
        }
      }
    },
  };
</script>