контроль над унаследованными атрибутами компонентом vue - PullRequest
Новая
       0

контроль над унаследованными атрибутами компонентом vue

0 голосов
/ 18 сентября 2019

Есть ли способ контролировать атрибуты, предоставляемые через тег компонента?Например: 

<my-component class="myClass" style="myStyle"></my-component>

Мой компонент: 

<template>
   <div>
      <div>

      </div>
      <div>

      </div>
   </div>
</template>

При рендеринге Vue применяет заданные атрибуты к корню: 

   <div class="myClass" style="myStyle">
      <div>

      </div>
      <div>

      </div>
   </div>

Я хочу контролировать, где эти атрибутыприменяются так: 

   <div>
      <div>

      </div>
      <div class="myClass" style="myStyle">

      </div>
   </div>

1 Ответ

1 голос
/ 18 сентября 2019

@ Boussadjra Brahim - это, безусловно, один из способов справиться с ним, однако для этого вам потребуется передавать все атрибуты класса, которые вы хотите, каждый раз, когда вы определяете компонент.

На этот вопрос дан ответ в этом сообщении SOуже также. Как стилизовать вложенный компонент из его родительского компонента в Vuejs?

Если вы хотите немного большей гибкости, я бы предложил использовать интерполяцию и свойства, как показано ниже.Это позволит вам определить некоторые классы по умолчанию и дополнительно передать все остальное. 

<app-header :headerclass="parent-header-class"> </app-header>

Внутри вашего дочернего компонента вы можете использовать эти свойства и v-bind связать класс внутри HTML, как показано впример ниже: 

<template>
    <div :class=`${headerClass} internal-class-example button`> </div>
</template>

Примечание: Это не позволяет использовать любой родительский CSS с областью действия для передачи дочернему элементу.Классы, которые вы передаете, должны быть глобальными.В противном случае дочерний компонент не будет знать, что это такое.

...