扩展和重新分配 vuetify 组件答案

【问题标题】：Extend and re-assign vuetify component扩展和重新分配 vuetify 组件
【发布时间】：2019-03-18 18:01:01
【问题描述】：

我想为 vuetify 的 v-card-title 组件添加自定义道具。但是，我仍然想用我的自定义道具调用 vuetify 组件，我该怎么做？我正在尝试这个，但没有成功。

codesandbox 中的示例：https://codesandbox.io/s/71nr1w3qvq

<template>
  <!-- How to add computed at VCardTitle? -->
</template>

<script>
import VCardTitle from "./somepath/VCardTitle";

export default {
  name: "App",
  props: ['variant'],
  extends: VCardTitle,
  computed: {
    addVariant: function() {
      if(this.variant === 'light') {
       return 'light-theme'
      }
      return 'dark-theme'
    }
  }
};
</script>

<style>
</style>

【问题讨论】：

你能解释一下你到底想要什么吗？
Vuetify 给出了名为 v-card-title 的组件，但是，我想添加一个 prop 来自定义该组件并继续通过 v-card-title 调用它。我不会做包装。
没办法，要自定义就得包起来
是的，不幸的是，我不得不做 wrapper 来处理它 =/

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

你可以这样使用jsx

//App.js
export default {
  name : 'App',
  render(createElement){
    return createElement(
      'VCardTitle',
      'My title'
    )
  }
}
//if you want more information go to this documentation:
//https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

【讨论】：

问题是我想覆盖 Vuetify 组件的名称，这会导致循环，因为名称相同 =/