如何使 Vue 组件的类绑定绑定到内部元素而不是根元素？答案

【问题标题】：How can I make the Vue component's class binding bind onto the inner element instead of the root element?如何使 Vue 组件的类绑定绑定到内部元素而不是根元素？
【发布时间】：2021-04-16 02:10:57
【问题描述】：

假设我有一个看起来像这样的非常简单的组件

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>

我怎样才能做到这一点？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

对我来说，你可以将它作为道具传递。

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

在那个组件内部

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

【讨论】：

:class="className" 也需要在my-component 中声明props。 props: ['className'].