父组件传递给子组件的class属性
时间: 2023-08-18 16:23:22 浏览: 65
父组件可以通过使用props属性向子组件传递class属性。在父组件中,你可以定义一个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>
```
在这个例子中,我们将myClass属性传递给了子组件,使用的是子组件的属性:class-name,也就是说,在子组件中props的名字叫做className。
子组件可以通过props属性接收这个class属性,并将其应用于自己的元素上:
```
<template>
<div :class="className">
<!-- component content -->
</div>
</template>
<script>
export default {
props: {
className: {
type: String,
default: ''
}
}
}
</script>
```
在子组件中,我们使用了父组件传递过来的className属性,并将其应用于组件的根元素上。
这样,父组件传递给子组件的class属性就可以应用于子组件的根元素上了。