对于只有一个根元素的组件,当你使用了 class
attribute 时,这些 class 会被添加到根元素上并与该元素上已有的 class 合并。
举例来说,如果你声明了一个组件名叫 MyComponent
,模板如下:
<!-- 子组件模板 --> <p class="foo bar">Hi!</p>
在使用时添加一些 class:
<!-- 在使用组件时 --> <MyComponent class="baz boo" />
渲染出的 HTML 为:
<p class="foo bar baz boo">Hi!</p>
Class 的绑定也是同样的:
<MyComponent :class="{ active: isActive }" />
当 isActive
为真时,被渲染的 HTML 会是:
<p class="foo bar active">Hi!</p>
<p class="foo bar active">Hi!</p>
如果你的组件有多个根元素,你将需要指定哪个根元素来接收这个 class。你可以通过组件的 $attrs
属性来实现指定:
<!-- MyComponent 模板使用 $attrs 时 --> <p :class="$attrs.class">Hi!</p> <span>This is a child component</span>
<MyComponent class="baz" />
这将被渲染为:
<p class="baz">Hi!</p> <span>This is a child component</span>