vue 组件传递class
时间: 2023-07-08 15:20:56 浏览: 53
要在Vue组件之间传递类(class),你可以使用props属性。在父组件中定义一个class属性,并将其传递给子组件。子组件可以通过props来接收这个class属性,并将其应用于自己的元素上。
例如,在父组件中定义一个名为myClass的class属性:
```
<template>
<div>
<child-component :class-name="myClass"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
myClass: 'my-class'
}
}
}
</script>
```
子组件可以通过props属性接收这个class属性,并将其应用于自己的元素上:
```
<template>
<div :class="className">
<!-- component content -->
</div>
</template>
<script>
export default {
props: {
className: {
type: String,
default: ''
}
}
}
</script>
```
这样,父组件传递给子组件的class属性就可以应用于子组件的根元素上了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)