直接上代码:
<body>
<div id="app">
<top-component :head="head" :message="msg"></top-component>
</div>
<script>
Vue.component('top-component',{
render:function(createElement){
return createElement('h1',
{
attrs:{id:1},
on:{
click:this.clickHandler
},
},
[createElement('child-component',{props:{titles:this.message}})])
},
props:['message','head']
})
Vue.component('child-component',{
props:['titles'],
render:function(createElement){
return createElement('i',this.titles)
}
})
var vm = new Vue({
el:'#app',
data:{
msg:'this is last child',
head:[
{title:'product list'},
{title:'query center'},
{title:'order system'}
],
},
})
</script>
</body>
主要需要看的地方是这里:
当然你也可以这么写:
{attrs:{titles:this.message}}//效果一样 不过props语义化看着可能清楚点;
官方文档也不说清楚点,只能自己试,试了一个钟头,真无语,幸好解决了!