vue render子组件data中的props属性详解

直接上代码:

<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语义化看着可能清楚点;

官方文档也不说清楚点,只能自己试,试了一个钟头,真无语,幸好解决了!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值