vue-插槽slot

插槽，顾名思义，就是把某个东西插入固定的位置中

Vue项目中，我们可能会用到把父组件的值传到子组件中，如果要传的内容是某个div的话，我们就要用到这个slot

1.子组件中，我们这样写，先添加一个slot，表示父组件的传的内容会被分发到这个class="area"下的slot，内容传过来后会替代这个slot。

<template>
	<div class="scroll_cpt" ref='scroll'>
		<div class="area">
			<slot></slot>
		</div>
	</div>
</template>

2.然后回到父组件中。

<template>
	<div>
		<div class="scroll_solt">
			<v-scroll>
				<img  class="img" v-for="(item,index) in slides" :src="item.image"/>
			</v-scroll>									
		</div>
	</div>
</template>
<script>
	import scroll from '@/components/common/scroll.vue'
	import Vue from "vue"
	export default{
		data(){
			return{
			}
		},
		components:{
			'v-scroll':scroll,
		},
	}	
</script>

<style scoped> 
</style>

import引入一下子组件，然后componets添加

<v-scroll>
	<img  class="img" v-for="(item,index) in slides" :src="item.image"/>
</v-scroll>		

这里我们定义的v-scroll下面的内容就是分发到子组件中，看下实际效果

红框内就是添加的子组件，黄框内就是父组件传过去的就是上面添加在v-scroll下的img