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

直接上代码：&lt;body&gt;&lt;div id="app"&gt;&lt;top-component :head="head" :message="msg"&gt;&lt

古月的博客

6532人浏览 · 2019-03-05 18:42:49

古月的博客 · 2019-03-05 18:42:49 发布

直接上代码：

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^