vue插槽的使用

什么是插槽

插槽：在子组件中用< slot >< /slot >标签提供给父组件一个占位符，父组件可以在组件内容区域中填充任何形式模板的代码，如 HTML、组件等，填充的内容会替换子组件的< slot>< /slot>标签

1.默认插槽

举例说明：

父组件： app.vue

<template>
  <div id="app">
      首页
      <!-- 简单来说，组件的内容区域写内容为插槽 -->
      <v-home>
        我是插槽的内容
      </v-home>
  </div>
</template>
<script>
import {defineAsyncComponent} from 'vue';
export default {
  name:"app",
  components:{
   "v-home": defineAsyncComponent(() => import("./components/Home.vue")),
  }
}
</script>
<style>
</style>

子组件： Home.vue

<template>
      <div id="home">
        Home组件
        <br>
        <slot></slot>
      </div>
</template>
<script>
export default {
   name:"home",
}
</script>
<style>
</style>

结果为：

2.具名插槽

在需要多个插槽时，要使用具名插槽
举例说明：
父组件： app.vue

<template>
  <div id="app">
    <v-home>
      <template  v-slot:up >
        <h1>上层部分的内容</h1>
      </template>
      <template  v-slot:middle>
        <h1>中间部分的内容</h1>
      </template>
      <h1>下层部分的内容</h1>
    </v-home>
  </div>
</template>
<script>
import {defineAsyncComponent} from 'vue';
export default {
  name:"app",
  components:{
   "v-home": defineAsyncComponent(() => import("./components/Home.vue")),
  }
}
</script>
<style>
</style>

子组件： Home.vue

<template>
      <div id="home">
        上层部分
        <slot name="up"></slot>
        中间部分
        <slot name="middle"></slot>
        下层部分
        <slot></slot>
      </div>
</template>
<script>
export default {
   name:"home",
}
</script>
<style>
</style>

< template > 元素中的所有内容都将会被传入相应的插槽。
注意: v-slot 只能添加在 < template > 上 。
结果为：

3.作用域插槽

举例说明：
父组件： app.vue

<template>
  <div id="app">
      <v-home>
      <template v-slot:homelist="foodata">
        <!-- foodata指代的是整个homelist插槽 -->
         <button>{{foodata.it}}</button>
      </template>
      </v-home>
  </div>
</template>
<script>
import {defineAsyncComponent} from 'vue';
export default {
  name:"app",
  components:{
   "v-home": defineAsyncComponent(() => import("./components/Home.vue")),
  }
}
</script> 
<style>
</style>

子组件： Home.vue

<template>
  <div id="home">
     <ul>
         <li v-for="(item,index) in list" :key="index">
             <slot name='homelist' :it="item">
                 <!-- item的值在it属性上面 -->
             </slot>
         </li>
     </ul>
  </div>
</template>
<script>
export default {
  name:'home',
  data(){
      return{
          list:['首页','订单','我的'],
      }
  }
}
</script>
<style>
li{
   list-style: none;
}
</style>

结果为：