Блог

Главная - Вопросы по программированию - Vuejs Как передать родительские классы дочернему компоненту в шаблоне

Vuejs Как передать родительские классы дочернему компоненту в шаблоне

#vue.js #parent-child

#vue.js #родитель-потомок

Вопрос:

Я пытаюсь вспомнить, как передать родительские :class привязки к определенному дочернему компоненту в шаблоне. Например:

 // parent-component.vue
<template>
  <child-component :class="['foo', bar, 'baz']">
</template>
  
 // child-component.vue
<template>
  <div class="dont-want-classes-here">
    <h1 class="not-here-either">Someting v Important</h1>
    <sub-component :class="['want-parent-classes in-here', ...$parent.classes]">
  </div>
</template>

Нужно ли мне создавать новый prop только для этой цели? есть ли определенная часть экземпляра Vue, к которой я могу получить доступ из компонента?

Спасибо

Ответ №1:

Нужно ли мне создавать новый prop только для этой цели?

ДА. Vue не предоставляет способа настроить, как реквизит класса и стиля применяется к шаблону. Он всегда будет применять их к корневому элементу, и вы не можете это изменить.

Однако, если бы это был функциональный компонент, вы могли бы это сделать. Но здесь это не применимо.

Есть ли определенная часть экземпляра Vue, к которой я могу получить доступ из компонента?

Вы можете получить доступ к классу непосредственно из vnode:

 this.$vnode.data.staticClass  // for class="static"
this.$vnode.data.class        // for :class="dynamic"

Комментарии:

1. спасибо за подсказки. Должен ли я также установить inheritAttrs false значение, чтобы предотвратить применение классов к корневому элементу? Или это отдельные проблемы?

2. Нет, inheritAttrs это не помешает применению класса к корневому элементу, и нет никакого способа помешать Vue сделать это.