Vue中插槽的常见用法

Vue中的slot对于编写可复用可扩展的组件是再合适不过了，常见的用法有以下3种：
1. 插入一个匿名的slot，匿名的情况只适用于只插入一个的时候；
2. 插入有名的slot，当插入的slot有多个的时候，需要按名占位；
3. 在slot的内部可以将值通过有名slot传递出去，让外层组件接收；

1、基本用法

//组件
<template>
    <div class="com">
        <slot name="slotName"></slot>
        <slot>如果没有插槽或者不具名就是显示当前</slot>
    </div>
</template>

//使用
<template>
	<div id="app">
		<com>
			<div class="slotName" slot="slotName">
				我将会插入到名为slotName的插槽当中
			</div>
		</com>
	</div>
</template>

2、插槽中使用data

//组件
<template>
    <div class="com">
        <slot name="slotName" :slotData="data"></slot>//data表示插槽key值
        <slot>如果没有插槽或者不具名就是显示当前</slot>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                data:{
                    slotName:"我将会插入到名为header的插槽当中",
                }
            }
        },
    }
</script>
 
//使用
<template>
	<div id="app">
		<com>
			<template v-slot:slotName="{slotData}">
                //必须使用template包裹，v-slot后面跟着的是插槽名，slotData插槽里表示的key值
				<div class="slotName">
					{{slotData.slotName}}
				</div>
			</template>
		</com>
	</div>
</template>

3、动态插槽

//组件
<template>
    <div class="com">
        <slot name="slotName" :slotData="data"></slot>
        <slot name="body" :slotData="data"></slot>
   </div>
</template>
 
<script>
    export default {
        data() {
            return {
                data:{
                    slotName:"我将会插入到名为slotName的插槽当中",
                    body:"我将会插入到名为body的插槽当中"
                }
            }
        },
    }
</script>
 
//使用
<template>
	<div id="app">
		<com>
			<template v-slot:[slotName]="{slotData}">
				<div class="slot">
					{{slotData[slotName]}}
				</div>
			</template>
		</com>
	</div>
</template>
<script>
export default {
	name:"App",
	components:{
		com
	},
	data(){
		return{
			slotName:"slotName"
		}
	},
	methods: {
		changeSlotName(){
			this.slotName = this.slotName === "slotName" ? "body" : "slotName";
		}
	}
}
</script>

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。

在早期的时候子组件里面使用插槽没有改变，就父组件介绍跟应用插槽有差别，早期写法
父组件中

    <template>
	<div id="app">
		<com>
			<slot  slot-scope="scope">
				<div class="slotName">
					{{scope.data}}
				</div>
			</slot>
		</com>
	</div>
</template>