插槽

插槽

• 插槽种类

 1. 默认插槽
 2. 具名插槽
 3. 备用插槽
 4. 作用域插槽

• 默认插槽

  // 带插槽的组件
  <div>
    <header>1111</header>
    <slot></slot>
    <footer>2222</footer>
  </div>
 // 使用插槽的组件
 <template>
  <div>
    <my-component>
      <div class="innerDiv"></div>
    </my-component>
  </div>
 </template>

 <script>
 import cus from "./default2"
 export default {
  name: "default1",
  components: {
    myComponent: cus
  }
 }
 </script>

 // 使用插槽的组件
 <style scoped lang="scss">
 .innerDiv {
   100px;
  height: 100px;
  background-color: pink;}
 </style>

• 备用插槽

 // 插槽组件
  <header>1111</header>
  <slot>uuuuuu</slot>
  <footer>2222</footer>
 // 使用插槽组件
  <my-component>  
   </my-component>
    <my-component>
      <div>mmm</div>
    </my-component>
 // 不加内容默认显示<slot>标签内部的内容
 // 加内容 只显示内容部份

• 具名插槽

 // 插槽组件
  <div>
    <header>1111</header>
    <slot name="age"></slot>
    <footer>2222</footer>
  </div>
 // 使用插槽的组件
  <my-component>
      <div class="innerDiv"></div>
      <div slot="age">hahhaha</div>
   </my-component>
  slot=>v-slot

• 作用域插槽父组件为了访问子组件中的数据提出的方案

 // 插槽组件
<template>
  <div>
    <slot :dataList="list"></slot>
  </div>
</template>

<script>
export default {
  name: "default1",
  data () {
    return {
      count: 1,
      list: [
        { name: "lz", id: 1 },
        { name: "lz1", id: 2 },
        { name: "lz2", id: 3 },
        { name: "lz3", id: 4 },
        { name: "lz4", id: 5 },
        { name: "lz5", id: 6 },

      ]
    }
  }

}
 // 使用插槽组件
 <template>
  <div>
    <my-component>
      <template v-slot:default="scope">
        <div v-for="item in scope.dataList" :key="item.id">{{item.name}}</div>
      </template>
    </my-component>
  </div>
</template>

作用域插槽参考1
作用域插槽参考2