Vue slot插槽

具名插槽

<Recommend>  //我是子组件页面引入的名称
	<base-layout>
		<template v-slot:videoClip="navlist">
			<view>我是父组件内容</view>
		</template>
		<template>
		...
		</template>
		必须用Base-layout包裹一下
	</base-layout>
</Recommend>
子组件
<template>
	<view>
		<!-- 子组件写法一 -->
		<slot name="videoClip">
			我是具名插槽组件写法1
		</slot>
		<!-- 子组件写法二 -->
		<videoClip>
			我是具名插槽子组件写法2
		</videoClip>
	</view>
</template>

作用域插槽

父组件
<Recommend>
	<template v-slot:default="slotProps">
     	{{ slotProps.user.firstName }}
     </template>
	//写法二独占默认插槽的缩写语法
	 <template v-slot="slotProps">
		{{ slotProps.user.firstName }}
	</template>
	
	
	<!-- 无效，会导致警告 默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：-->
	<current-user v-slot="slotProps">
		{{ slotProps.user.firstName }}
		<template v-slot:other="otherSlotProps">
			slotProps is NOT available here
		</template>
	</current-user>
	
	
	//写法二多组件情况用
	<template v-slot:default="slotProps">
		{{ slotProps.user.firstName }}
	</template>
	<template v-slot:other="otherSlotProps">
	                    ...
	</template>
</Recommend>

子组件
<slot :user="user">{{user.lastName}}</slot>
export default {
       data() {
           return {
               user:{
                   "lastName":"bar",
                   "firstName":"foo"
               }
           }
       }
   }

解构插槽prop

 <Recommend-user v-slot="{ user }"></Recommend>
 <Recommend-user v-slot="{ user: person }"></Recommend>
 <Recommend-user  v-slot="{ user = { firstName: 'Guest' } }"></Recommend>