vue组件中的插槽使用

Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope
插槽的目的是让组件能后更好的进行扩展，使用起来更灵活

匿名插槽

故而言之就是插槽指定名称，默认为default

//comp
<div>
   <slot><slot>
</div>

//parent
<comp>hello</comp>  
/*
渲染出来的结果为
<div>
   hello
</div>

也就是将slot的标签包括内容替换为指定的hello
*/

具名插槽

若一个组件中有多个插槽，则可对这多个插槽进行命名，进行区分，也使得插槽更具语义化

//comp
<div>
	<p><slot></slot></p>
	<span><slot name="content"></slot></span>
</div>

//parent
//注意：父组件中使用的子组件的插槽，其作用域为父组件，故该title会渲染成父组件中的title的值
data() {
	return {
		title: '标题'
	};
}
<comp>
	//默认插槽用default做参数
	<template v-slot:default>具名插槽{{title}}</template>
	<template v-slot:content>内容信息</template>
</comp>

/* 渲染之后的为：
<div>
	<p>具名插槽标题</p>
	<span>内容信息</span>
</div>
*/

作用域插槽

当父组件中的使用到了子组件中的插槽，且需要显示子组件的某个变量的值，可通过slot的值进行上下文对象的获取

//comp
<div>
	<slot :foo="foo"></slot>
</div>

//parent
<comp>
	<template v-slot:default="ctx">内容显示:子组件的foo数据为{{ctx.foo}}</template>
</comp>