插槽的使用

默认插槽

//父组件
<header>
	<title> 我是匿名插槽</title>
</header>

//子组件 header
<div>
	<slot />
</div>

具名插槽

//父组件
<header>
	<title> 我是匿名插槽</title>
	<subTitle v-slot:subTitle>我是具名插槽</subTitle>
</header>

//子组件 header
<div>
	<slot />
	<slot name="subTitle" />
</div>

插槽传参

//父组件
<header> 
	<title  v-slot:default={user:'我是你爹'}> 我是匿名插槽 - 我要传参</title>
	<subTitle v-slot:subTitle={user:'我是你爹'}>我是具名插槽 - 我要传参</subTitle>
</header>

//子组件 header
<div>
	<slot :user="user">{{user.name}}</slot>
	<slot name="subTitle" :user="user">{{user.name}}</slot>
</div>

插槽缩写

//父组件
<header> 
	<title #default={user:'我是你爹'}> 我是匿名插槽 - 我要传参</title>
	<subTitle #subTitle={user:'我是你爹'}>我是具名插槽 - 我要传参</subTitle>
</header>

//子组件 header
<div>
	<slot :user="user">{{user.name}}</slot>
	<slot name="subTitle" :user="user">{{user.name}}</slot>
</div>