Vue 插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot>表示

父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签

分为 三种类型插槽

首先第一种: 默认插槽

默认插槽是通过替换占位符达到在父组件中更改子组件中内容的效果。

// 父组件
<template>
   <Child>
   1111
   </Child>
</template>
<script>
  import Child from './Child'
  export default {

  }
</script>

// 子组件
<template>
    <div class='name'>
    <slot></slot>
  </div>
</template>

第二种: 具名插槽

给子组件中的插槽取一个名字，而父组件就可以在引用子组件的时候，根据这个名字对号入座，将相应内容填充到相应的插槽中。

<template>
    <div>
        <span>三个插槽：</span>
        <chassList>
            <template v-slot:one>
                <span>one,</span>
            </template>
            <template v-slot:two>
                <span>two</span>
            </template>
            <template v-slot:default> // 默认插槽
                <span>three</span>
            </template>
        </chassList>
    </div>
</template>
<script>
  import chassList from './chassList'
export default {
   
}
</script>
<template>
    <div>
        <span>第一个插槽</span>
        <slot name="one"></slot>
        <span>第二个插槽</span>
        <slot name="two"></slot>
        <span>第三个插槽</span>
        <slot></slot>
    </div>
</template>
 
<script>
export default {
    name: 'chassList'
}
</script>

页面输出: 两个插槽：第一个插槽one, 第二个插槽two, 第三个插槽three

第三种:作用域插槽

子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容

<template>
    <div class='father'>
        <Child v-slot='slotProps'>
                    {{ slotProps.user.lastName }}  // 22
        </Child>
  </div>
</template>
<script>
  import Child from './Child'
export default {
   
}
</script>
 
<template>
    <div class='child'>
    <slot v-bind:user='user'>
            {{ user.firstName }}  // 11
    </slot>
  </div>
</template>
<script>
    export default{
    name:"child",
    data(){
        return {
            user:{
            firstName:"11",
            lastName:"22",
          }
      }
    }
  }
</script>