scoped slot

关于scoped slot自学

看了官方的例子，总是会报错firstName is undefined，原来不能在父级里面定义user，而是在子级里面定义user。例子如下：

<current-user>
	<template v-slot:default='slotProps'>//这里的slotProps可以用你自己喜欢的名字来代替。slotProps会包含子级里面的属性，此例中就是user
		{{ slotProps.user.firstName }}
	</template>
<current-user>

new Vue({
	el : 'app',
	components : {
		'current-user' : {
			data : function (){ //这里的定义就是关键了，之前定义在父级里，子级并不能访问到user。原来v-slot:default='slotProps'是为了父级方便访问子级的方法。
				return {
					user : {
						firstName : 'xiang',
						lastName : 'wang'
					}
				}
			},
			template : `
				<span>
					<slot name='default' :user='user'>//这里定义的user被包含在slotProps里面
						{{ user.lastName }}
					</slot>
				</span>
			`
		}
	}
})

当<template v-slot:default='slotProps'>{{ slotProps.user.firstName }}</template>里面有内容时，就会优先显示这里面的内容,若没有内容，就会显示子级<slot name='default' : user='user'>{{ user.lastName }}</slot>里面的内容。

阅读完毕后，如果您有什么建议或者意见可以留言。这些内容都是自学笔记，也许日后会觉得’这样的内容都需要做一个文章嘛？！’。哈哈，在学习中成长吧~

参考文档