vue插槽slot的简单理解

**先创建一个子组件文件solt.vue**
1.**默认插槽**
<template>
<div class="solt__body">
 <slot></slot> //这个标签的作用就是接受存放父组件传过来的信息数据
</div>
</template>
<script>
export default {
}
</script>

1.**默认插槽在父组件页面应用father.vue**
<template>
<div>
<my-solt>
<p>这里的P标签内容会渲染到子组件里面的《solt》插槽里面</p>
<my-solt>
</div>
</template>
<script>
import MySolt from './solt.vue'
export default {
  components: {
    MySolt
  }
}
</script>

2.**具名插槽 子组件**
<tempalte>
<div class="solt__title">
 	<slot name="title"></slot>
	<slot name="header"></slot> //具名插槽就是通过“name”然后再给一个你想定义区分的名字
	<slot name="footer"></slot>	
 </div>
</tempalte>
<script>
export default {
}
</script>

2.**具名插槽 父组件**
<template>
  <div>
    <my-solt>
	<template v-slot:title>
	<span>这里是标题</span>
	</template>
	
	<template  v-slot:header> //这里定义的插槽名字必须跟子组件插槽定义的名字一样。“v-solt:header”也可简写“#header”
		<span>这里是头部</span>
	</template>
	
	<template  v-slot:footer>
		<span>这里是底部</span>
	</template>
	
    </my-solt>
  </div>
</template>
<script>
import MySolt from './solt.vue'
export default {
  components: {
    MySolt
  },
 data(){
	return{
		
		 }
	 }
}
</script>

3.**作用域插槽 子组件**
<template>
  <div class="solt">
	<!-- 作用域插槽 -->
	<slot v-bind:userData="user" name="header_a"> //尽量避免作用域插槽名字跟具名插槽名字相同，不然会导致作用域不明确，建议区分。"v-bind:userData"可自定义名字
	        {{ user.firstName }}
	</slot>
	<slot v-bind:hobbyData="hobby" name="footer_b">
	        {{ hobby.fruit }}
	</slot>
  </div>
</template>
<script>
export default {
  data(){
	  return{
		user:{
		   firstName: 'gerace',
		   lastName: 'haLi',
		  },
		hobby:{
		   fruit: "apple",
		   color: "blue"
		 }
	  }
  }
}
</script>
<style>
</style>

3.**作用域插槽 父组件**
<template>
  <div>
    <my-solt>
    <template v-slot:header_a="{userData}"> //这里的"{userData}"必须跟子组件"v-bind:userData"相对应才可以
        {{userData.firstName }}
    </template>
    <template v-slot:footer_b="{hobbyData}">
        {{hobbyData.fruit }}
    </template>
    </my-solt>
	
  </div>
</template>
<script>
import MySolt from './solt.vue'
export default {
  components: {
    MySolt
  },
 data(){
	return{
			
		}
	  }
}
</script>