浅析插槽

在学习插槽之前，首先应该要了解在什么情况下会用到插槽，如果不理解的话可能会对插槽有错解，既然衍生出插槽这个组件肯定是在实际开发中有用途的。
先看一下这张图片：

在开发这这几个导航栏的时候，如果用component组件开发的话，首先用一个父组件（容器）包裹里面的内容，就拿上面三个图来讲，就要写三个子组件，如果要是10个类似这种导航栏就会延长开发周期。
这个时候如果用slot的话，也是先用父组件做一个包裹，取出这几个组件共同的部分，样式及功能只需在slot中写一次即可，剩下就交给子组件入参及加功能。当然会有小伙伴会问没有共同的部分怎么办，这个时候就得自由发挥，也可以component跟slot一起用。下面就来看一下插槽的定义、分类及使用

二.插槽的定义

插槽的定义：插槽也是一种组件，并且可以传参

三.插槽的分类

插槽的分类：匿名插槽、具名插槽、作用域插槽

四.插槽的使用

1.匿名插槽

子组件：test.vue

<template>
	<div class="test">
		<slot>我是子组件的匿名插槽</slot>
	</div>
</template>

父组件：index.vue

<template>
	<test-index>
		我是父组件
    </test-index>
</template>

展示的结果： 我是父组件

2.具名插槽

使用方法：定义插槽的时候给个name属性 ,在引用组件的时候，,其中的v-slot:test可以写成#test
子组件:test.vue

<template>
	<div class="test">
		<slot>我是子组件的匿名插槽</slot>
		<header>
			<slot name="header">头部</slot>
		</header>
		<main>
			<slot>内容</slot>
		</main>
		<footer>
			<slot name="footer">尾部</slot>
		</footer>
	</div>
</template>

父组件：index.vue

<template>
	<test-index>
		我是父组件
		<template v-slot:footer></template>
    </test-index>
</template>

展示的结果：
我是父组件（替换了匿名插槽）
头部 （任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容）
我是父组件 （替换了匿名插槽）
我是父组件调用的footer插槽 （带有v-slot：footer的属性会覆盖掉子组件所定义的插槽name属性为footer的内容）

用vue官网上的话来说就是：现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。

3.作用域插槽

子组件：test.vue

<template>
	<div class="test">
	      <slot :data="name" :data1="age">我是子组件的普通插槽{
     {
     name}}</slot>
	</div>
<template>
<script>
export default {
     
  data() {
     
    return {
     
        name:'testtest',
        age:10
    };
  }
};
</script>

父组件：index.vue

<template>
	<test-index>
		<template slot-scope="name">{
     {
     name}}{
     {
      name.data }}{
     {
     name.age}}</template>
    </test-index>
</template>

展示的结果：
{ “data”: “testtest”,“data1”:10 }testtest10
对于slot-scope=""中值没有要求，一般来说只要不取关键字就行，当然子组件要是传两个值过来，父组件这边拿到的就是两组键值对，key对应着子组件的key，value对应子组件的value（即key:“data”,value:“name”）

注意：作用域插槽的拿到的值是一个对象key为data，value则是子组件传过去的值

总结：匿名插槽，具名插槽使用必须父子组件的name对应，作用域插槽通常用于传递数据，多用于子组件将数据传递父组件

官方链接: https://cn.vuejs.org/v2/guide/components-slots.html