如果直接在自定义组件上使用class 或 :class，样式规则会直接应用到这个组件的根元素上。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>在组件上使用</title>
</head>
<body>
<div id="app">
<my-component :class="{'active': isActive }"></my-component>
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
<!--声明一个简单的组件-->
Vue.component('my-component',{
template:'<p class="article">你好啊！</p>'
});
</script>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true
}
})
</script>
</body>
</html>
这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效，当不满足这些条件或需要给具体子元素设置类名时，应当使用组件的props来传递。这些用法同样适用于绑定内联样式 style 的内容。
在组件上使用.png
网友评论