class参数
<body>
<div id="demo">
<child ></child>
</div>
<script>
Vue.component('child',{
render:function(createElement){
return createElement('h1',{
<-class 参数
class:{
foo:true,
crr:false
}
})
}
})
var app = new Vue({
el: '#demo',
data: {
}
})
</script>
</body>
</html>
style参数
<body>
<div id="demo">
<child ></child>
</div>
<script>
Vue.component('child',{
render:function(createElement){
return createElement({
template:'<div>样式受style参数影响</div>'
},{
//style 参数
style:{
color:'red',
fontSize:'30px'
},
})
}
})
var app = new Vue({
el: '#demo',
data: {
}
})
</script>
</body>
attrs 标签默认有的属性 例如 ![]()
默认有src src就可以写在attrs中
body>
<div id="demo">
<child ></child>
</div>
<script>
Vue.component('child',{
render:function(createElement){
return createElement({
template:'<div>样式受style参数影响</div>'
},{
//attrs 正常html特性 就是 标签默认有的属性
attrs:{
id:'mso',
width:'100px'
}
})
}
})
var app = new Vue({
el: '#demo',
data: {
}
})
</script>
</body>
domProps 用来写原生的DOM属性
<body>
<div id="demo">
<child ></child>
</div>
<script>
Vue.component('child',{
render:function(createElement){
return createElement({
template:'<div>样式受style参数影响</div>'
},{
//attrs 正常html特性 就是 标签默认有的属性
domProps:{
innerHTML:'<span style="color:blue;">会覆盖掉template中的 dom数据</span>'
}
})
}
})
var app = new Vue({
el: '#demo',
data: {
}
})
</script>
</body>
