什么是插槽

我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。

作用域插槽:举个栗子

<template>
    <div>
    <!--默认插槽的使用-->
    <MySlot/>
    <!--具名插槽的使用-->
    <MySlot v-slot:slotNmae>
        <template>
            <h1>此处 template 内容将被放在 具名插槽的坑里</h1>
        </template>
    </MySlot>
    
    <!-- 作用域插槽 通过 slot-scope 反向访问数据 作用域插槽必须使用 <template> 包裹起来-->
     <MySlot> 
         <template slot-scope="{languages}">
             <ul>
                 <li v-for="item in languages" :key="item">{{item}}</li>
             </ul>
         </template>
     </MySlot>
    </div>
</template>

<script>
  import MySlot from 'MySlot';
  export default {
    components: {
      MySlot
    }
  }
</script>

<template>
  <div>
      <!--默认插槽-->
      <slot>我是插槽的默认内容</slot>
      <!--具名插槽-->
      <slot name="slotNmae"></slot>
  </div>
</template>

<script>
export default {
    name:"Myslot",
    data(){
        return {
            languages:["js","java","pythone","go","C","C++"]
        }
    }
}
</script>

推荐阅读:JH30K:一次性将插槽讲明白