He estado usando el Codepen de ejemplo ( https://codepen.io/whoistobias/pen/yLNgjwy ) para tratar de extender el componente Vuetify VBtn para crear un componente de icono de botón reutilizable.

Estoy terriblemente cerca, pero como de costumbre, estoy tropezando en el último obstáculo.

El código principal es este:

 const VBtn = Vue.options.components["VBtn"]; const VIcon = Vue.options.components["VIcon"]; const ButtonIcon = { name: 'ButtonIcon', extends: VBtn, props: { icon: { default: true, type: Boolean }, iconColor: { default: 'info', type: String }, iconName: { default: 'help', type: String }, outline: { default: true, type: Boolean } }, methods: { genContent () { return this.$createElement('div', { class: 'v-btn__content' }, this.$slots.default || [this.$createElement( VIcon, { props: { color: this.iconColor } }, this.iconName )]) } } };

La parte que no está del todo bien es donde se inserta this.iconName en el VIcon . El resultado de esto es "add" en lugar de add cuando el valor de prop iconName es add .

Hice todo lo posible para tratar de digerir el contenido de los documentos de ayuda sobre el uso de createElement en los documentos de Vue: https://v2.vuejs.org/v2/guide/render-function.html?redirect=true#createElement-Arguments

Aquí está mi Codepen bifurcado del código de trabajo: https://codepen.io/scp-nm/pen/PoQPVEP

Cualquier ayuda al respecto será enormente apreciada.