Vue插槽的用法（slot）

vue slot插槽的使用

在vue2.6.0版本后slot插槽已废弃，取而代之的是使用v-slot，所以在这里我们对已废弃的slot插槽不做探讨

1.具名插槽：

注意：v-slot:xxx 只能在template标签上使用，如果不想用template标签包裹，可以吧v-slot:xxx替换成旧的写法：slot=“xxx”

父组件中：

<template>
	<Children title="张三">
	 <template v-slot:footer>
 		<div>
 			<a href="http://www.baidu.com">百度一下</a>
 			<a href="http://www.baidu.com">你就知道</a>
 		</div>
 		<h3>欢迎回来！</h3>
 	</template>
	<Children>
</template>

子组件中：

 <template>
 	<h1>我的名字叫{{title}}</h1>
 	<slot name="footer">这里是默认值，当使用者没有传递具体结构时显示</slot>
 </template>

 export default {
 	props:['title']
 	data(){return{}}
 }

2.作用域插槽

在实际的开发中，正确的使用作用域插槽能起到事半功倍的效果！这里举个栗子：当数据在组件自身，但根据数据所生成的结构需要组件的使用者来决定时我们就可以使用作用域插槽。
子组件中：

通过v-bind 给slot插槽标签绑定一个自定义属性，通过v-bind绑定的自定义属性会传递给插槽的使用者的scope属性
也可以传递多个属性，通过v-bind传递

 <template>
 	<h1>我的名字叫{{title}}</h1>
 	<slot v-bind:todos="todos">这里是默认值，当使用者没有传递具体结构时显示</slot>
 </template>

 export default {
 	props:['title']
 	data(){
 		return{
 			todos:['吃饭','写作业','睡觉']
 		}
 	}
 }

父组件中：

使用scope属性来接收传过来的值，(传递的值会被包裹在一个对象中)要传递的插槽内容，必须用template标签包裹，否则会报错

 <Children>
 	<template v-slot="dataObj">
 	<!-- <template v-slot="{todos}"> 结构赋值的写法-->
 		<ul>
 			<li v-for="(todo,index) in dataObj.todos" :key="todo">{{todo}}				</li>
 		</ul>
 	</template>
 </Children>