Свойства VueJS - Как избежать наследования атрибутов "класса"?
VueJS автоматически наследует Атрибуты, не относящиеся к реквизиту, это отлично подходит для атрибутов data- *.
Но мы не хотим наследовать атрибуты "class" и "style", чтобы сохранить наши основные компоненты от любых изменений макета любым новым разработчиком (потому что мы хотим, чтобы все стили компонентов были внутри его файла стиля).
Есть inheritAttrs: false, чтобы избежать наследования "атрибутов без поддержки", но:
Note: this option does not affect class and style bindings.
https://vuejs.org/v2/api/#inheritAttrs
Итак, предложения по предотвращению наследования "класса" и "стиля" в основном компоненте?
Обновлять:
Предлагаемое решение:
<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/
Обновлять [28 апреля 2021 г.] ?
В Vue3 мы могли отключить наследование атрибутов с помощью:
inheritAttrs: false,
Документ Vue3 - https://v3.vuejs.org/guide/component-attrs.html#disables-attribute-inheritance
Пример - https://jsfiddle.net/awan/oz5fbm2k/
Даже если вы удалите атрибуты class и style из корневого элемента компонента, это не предотвратит каскадирование стилей в компонент от родителей. Просто определите все правила стиля, которые вы не хотите переопределять в компоненте, и убедитесь, что новые разработчики не используют !important.
@Awan приятно добавить ссылку на решение ypur. Но, пожалуйста, подумайте о том, чтобы написать свой собственный ответ с объяснением и кодом, вместо того, чтобы полагаться на внешний источник, который может быть удален в будущем.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы не можете отказаться от этого поведения, если это не функциональный компонент.
"класс" кажется недоступным в контексте функционального компонента - jsfiddle.net/awan/53xuhamt
Привязки классов и стилей доступны в объекте data vnode в свойствах class, staticClass, style и staticStyle, но только если они были установлены в шаблоне. В вашей скрипке вы не указали какой-либо класс или стили, поэтому они отсутствуют во vnode.
В принципе, я пытаюсь пропустить class = "testing" в корне «nsc-option», так что «ignore-class» - это директива записи для обработки этого?
nsc-option не является функциональным компонентом, поэтому вы не можете запретить Vue применить класс testing к корневому элементу этого компонента (чем бы он ни был).
Довольно хакерское решение, но это сработало для меня
data(){
return {staticClass: ''}
},
mounted(){
// Capture the classes and use them on nested elements where desired
this.staticClass = this.$el.classList.toString()
// Remove the classes from the root element
this.$el.setAttribute('class', '')
}
Как и @Decade Moon, я думаю, что нет правильного способа сделать это. Я могу представить, как это сделать, но он не очень чистый и не простой в обслуживании. В каждом или ваших дочерних компонентах вы можете сделать это:
mounted() { this.$el.className = 'only classes you want'; }