具名插槽和匿名插槽_vue-插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

1.插槽

<template>
//创建slots.vue
  <div>
     <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'Slots',
}
</script>
<style>
</style>

主文件引入

<template>
  <div> 
    App
    //原生效果
    //<Slots />
    //插槽效果。这样在中间可以嵌套内容
      <Slots>
          <div>
            //这里的内容会被插入到Slots中显示
            我是插槽
          </div>
      </Slots>
  </div>
 </template>
<script>
import Slots from './Slots'
export default {
  name:"App",
  compinents:{
   Slots 
  }
}
</script>
<style>
</style>

2.默认插槽

如果主页面不传值就会显示插槽默认值,如果主页面传值就会显示主页面的值。

<template>
  <div>
     <slot>插槽默认值</slot>
  </div>
</template>
<script>
export default {
  name: 'Slots',
}
</script>
<style>
</style>

App页面

<template>
  <div> 
    App
      <Slots>
          <div>
            我是插槽
          </div>
      </Slots>
  </div>
 </template>
<script>
import Slots from './Slots'
export default {
  name:"App",
  compinents:{
   Slots 
  }
}
</script>
<style>
</style>

3.具名插槽

实现加载的时候加载到不同位置，通过不同位置来标识是哪个div。这个时候就需要把每一个结构指定一个名称。优点就是通过名字和不同的结构进行匹配，默认插槽只能匹配一个结构。

主页面传递

<template>
  <div> 
    App
      <Slots>
          <template v-slot:head>
            头部
          </template>
          <template v-slot:body>
            身体
          </template>
          <template v-slot:foot>
            底部
          </template>
      </Slots>
  </div>
 </template>
<script>
import Slots from './Slots'
export default {
  name:"App",
  compinents:{
   Slots 
  }
}
</script>
<style>
</style>

slots页面显示

<template>
  <div>
    <div>
       <slot nema="head"></slot>
    </div>
     <div>
       <slot nema="body"></slot>
    </div>
    <div>
      <p> 我是分割线 </p>
    </div>
    <div>
       <slot nema="foot"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Slots',
}
</script>
<style>
</style>