在组件上使用

简介: 在组件上使用

对于只有一个根元素的组件,当你使用了 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>

 

相关文章
|
4月前
|
监控 数据可视化 索引
四个组件配置说明
官方文档!!!!!!!!! 1.在Filebeat中配置info.log日志文件的路径,以及要将日志发送到Logstash的地址和端口,可以在Filebeat的配置文件 filebeat.yml中添加如下配置: Copy filebeat.inputs: - type: log paths: - /usr/logs/info.log fields: log_type: info output.logstash: hosts: ["localhost:5044"] 这里使用filebeat.inputs指定要监控的日志文件路径
56 5
|
7月前
|
JavaScript
组件上使用 v-for
组件上使用 v-for
|
7月前
|
资源调度 JavaScript 前端开发
2020你应该有一个自己的组件
2020你应该有一个自己的组件
70 0
|
7月前
|
JavaScript 前端开发
Vue3中的组件:组件的定义、组件的属性和事件、组件的Slots和动态组件
Vue3中的组件:组件的定义、组件的属性和事件、组件的Slots和动态组件
160 0
|
设计模式 JavaScript 前端开发
可复用性的组件详解
可复用性的组件详解
230 0
可复用性的组件详解
|
JavaScript 开发者
Vue 3 中组件现在正式支持多根节点组件
Vue 3 中组件现在正式支持多根节点组件
592 0
|
负载均衡 网络协议 Java
SprongCloud组件
SprongCloud组件
|
架构师 定位技术 iOS开发
关于组件,你真的了解么?
最近经常听到“组件化开发”,那架构设计里,组件到底如何定义、设计和应用呢,今天我们一起来聊聊。
关于组件,你真的了解么?
|
开发者
NSAlert组件应用总结
NSAlert组件应用总结
455 0
NSAlert组件应用总结