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>
			<p>我是slot 1111p>
		template>
		<template v-slot:slot2>
			<p>我是slot 2222p>
		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>
    	
    	<template v-slot:slot1='slotProps'>
			<p>{
    { slotProps.myslot.slotContent }}p>
		template>
		
		<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>