VueJS реквизиты - Как я могу избежать наследования атрибутов "класс"?

Question

VueJS автоматически наследуется Не-атрибуты , отлично подходит для атрибутов data- *.

Но мы не хотим наследовать атрибуты "class" и "style", чтобы сохранить наши основные компоненты от любого изменения макета любым новым разработчиком (потому что мы хотим, чтобы все стили компонента были в его файле стиля)

Существует inheritAttrs: false, чтобы избежать наследования "non-prop attribute", но:

Примечание. Этот параметр не влияет на привязки классов и стилей.

https://vuejs.org/v2/api/#inheritAttrs

То есть предложения, чтобы избежать наследования "class" и "style" в базовом компоненте?

Обновление:

Предлагаемое решение:

<template>
 <div ref="root" class="hello">Hi</div>
</template>

<script>
export default {
  mounted() {
   this.$refs.root.className = 'hello'
  }
 }
</script>

Но предлагаемое решение даже сложно, когда зависит от атрибутов компонента:

Vue.component('my-feedback', {
        props: ['type'],
        data: function(){
            var vm = this;
            return {
                classes: {
                    'my-feedback-info': vm.type === 'info',
                    'my-feedback-note': vm.type === 'note',
                    'my-feedback-warning': vm.type === 'warning',
                    'my-feedback-success': vm.type === 'success'
                }
            };
        },
        template: `
                    <div class="my-feedback" :class="classes">
                        <slot></slot>
                    </div>
                `
    });

Обновление [20 мая 2018]:

Получил ответ через канал чата VueJS - https://discordapp.com/channels/325477692906536972/325479107012067328

Решено JSFiddle - https://jsfiddle.net/53xuhamt/28/

Answer 1

Вы не можете отказаться от этого поведения, если это не функциональный компонент.