Блог

Предположим, у меня есть очень простой компонент, который выглядит следующим образом

 Vue.component("my-component", {
  template: `
    <p class="foo bar">
      <span>Hi</span>
    </p>
  `,
});
 

Если я использую компонент следующим образом

 <my-component class="baz boo"></my-component>
 

Окончательный визуализированный HTML будет выглядеть так

 <p class="foo bar baz boo">
  <span>Hi</span>
</p>
 

Однако я хочу привязать свой класс к <span> тегу вместо корневого элемента.

Это результат, который я хочу

 <p class="foo bar">
  <span class="baz boo">Hi</span>
</p>
 

Как я могу этого добиться?

Для меня вы можете передать его как реквизит.

 <my-component :className="baz booz" />
 

внутри этого компонента

 <span :class="class-name"> Hi </span>