vue插槽的使用-slot

vue的官方文档中介绍插槽是说：slot是一套内容分发的Api。那我们怎么理解solt呢？

1、作用

插槽可以让用户去扩展组件，增强了组件的扩展性，使得组建的复用更加强大。

2、使用场景

在组件化开发中，我们说，通常会把一段复用的代码单独写成一个组件，但是有时仅仅是这样不能满足需求，这时候可以用到插槽。通过父组件向子组件分发内容。插槽可以让调用者（父组件）实现结构和样式的自定义。

3、插槽的使用

3.1、匿名插槽

子组件：

<!--  -->
<template>
  <div class="test">
    <slot>
    	<!-- 在父组件调用没有自定义内容时显示这个内容 -->
      <span>默认内容(官方文档叫做后备内容)</span>
    </slot>
  </div>
</template>

<script>

export default {
	name:'child',
}
</script>

父组件：

<template>
  <div class="hello">
    <h1>插槽</h1>
    <child>
      <p>匿名插槽 | 默认插槽 </p>
    </child>

  </div>
</template>

<script>
import child from './child'
export default {
  name: "HelloWorld",
  components:{
    child
  }
};
</script>

3.2具名插槽（用得最多）

具名插槽顾名思义就是拥有名字（name属性）的solt，name对应父组件的v-slot指令进行分发。
通过v-solt指令将不同的插槽内容分发到不同name的插槽

子组件：

<!--  -->
<template>
  <div class="test">
    <slot name='slot1'>
    	<!-- 在父组件调用没有自定义内容时显示这个内容 -->
      <span>默认内容(官方文档叫做后备内容)</span>
    </slot>
    <slot name='slot2'></slot>
  </div>
</template>

<script>

export default {
	name:'child',
}
</script>

父组件：

<template>
  <div class="hello">
    <h1>插槽</h1>
    <child>
    	<!-- 使用template绑定v-slot指令 slot1对应子组件的name属性值-->
    	<template v-slot:slot1>
			<p>我是slot 1111</p>
		</template>
		<template v-slot:slot2>
			<p>我是slot 2222</p>
		</template>
    </child>

  </div>
</template>

<script>
import child from './child'
export default {
  name: "HelloWorld",
  components:{
    child
  }
};
</script>

3.3 作用插槽（官方叫法）

什么时作用域插槽？通俗的讲，在插槽里，插槽的内容和样式都是通过父组件去控制的，就是说，子组件控制不了插槽的样式和内容。但是，我们想插槽的内容显示的子组件的内容，那要怎么做呢？
这就需要作用域插槽，者其实就是插槽的一个Props，子组件可以将数据传送到父组件的插槽，同属性的方式。

子组件：

<!--  -->
<template>
  <div class="test">
    <slot name='slot1' :myslot='slotContent'>
    	<!-- 在父组件调用没有自定义内容时显示这个内容 -->
      <span>默认内容(官方文档叫做后备内容)</span>
    </slot>
    <slot name='slot2' :myslot='slotContent'></slot>
  </div>
</template>

<script>

export default {
	name:'child',
	data(){
		return {
			slotContent:"我是子组件的内容"
		}
	}
}
</script>

父组件：

<template>
  <div class="hello">
    <h1>插槽</h1>
    <child>
    	<!-- slotProp可以是随意符合规范的名字，接收的是整个插槽的对象，其中包含myslot -->
    	<template v-slot:slot1='slotProps'>
			<p>{{ slotProps.myslot.slotContent }}</p>
		</template>
		<!-- 解构props : 其实就是利用es6的对象解构赋值  -->
		<template v-slot:slot2='{ myslot }'>
			<p>{{ myslot.slotContent }}</p>
		</template>
    </child>

  </div>
</template>

<script>
import child from './child'
export default {
  name: "HelloWorld",
  components:{
    child
  }
};
</script>

3.4 动态插槽

动态插槽就是v-slot绑定的是一个可以改变的动态变量

<template v-slot:[slotName]>
	<p>动态插槽</p>
</template>