利用插槽二次封装组件基础篇（上）

在前端技术里有很多技术我们只是浅浅的了解了一下，很多时候以为自己懂了但是到真正写的时候其实却没完全懂，可能业务场景用的不算多没深入理解，  也没及时总结，导致很多这种不算太难但又没完全掌握的基本技术，其中vue里面就有一个封装组件很常用到的技术——插槽。废话不多说直接进正文

      先简单铺垫一下插槽的基本概念与基本用法，首先插槽主要是用来占位置的，比如有这么一个需求封装一个布局类的组件，比如经典的圣杯布局，这个时候我们就可以把布局写死然后里面的内容通过插槽的方式让调用组件的人来决定渲染什么，具体可以看下代码如下

子组件代码：

layout.vue

父组件调用：

效果图：

若此时在父组件调用的时候不使用插槽如把左侧插槽注释掉就会显示子组件默认填写好的内容

子组件代码：

这时候左侧的内容就变成了子组件默认传进来的内容了，以便一些业务需要传默认的可以采用这种方式

以上就是利用具名插槽封装组件的基本思路了

插槽里面除了具名插槽还有默认插槽，默认插槽的使用更为简单,只需要在子组件声明插槽，在父组件调用的时候直接填充内容即可代码如下

子组件代码：

以上就是具名插槽和默认插槽的最基本使用方法了，这里先写一篇基础篇希望能给到还没懂插槽怎么用的起到个抛砖引玉的作用，更多的用法还是靠自己多翻翻官方文档进行更深入的学习

下篇将会把更为难点的作用域插槽以及如何二次封装组件如何保留官方自带的slot功能和大家进行分享

附核心代码：

子组件：
<template>
<div class="handleFlex">
      <div class="left_content">
        <slot name="left">
          不传内容默认渲染这行
        </slot>
      </div>
      <div class="center_content">
        <slot name="center"></slot>
      </div>
      <div class="right_content">
        <slot name="right"></slot>
      </div>
  </div>
</template>
<script>
export default {
  name:'Layout',
  data(){
    return {
    }
  }
}
</script>
<style lang="css" scope>
.handleFlex{
  display: flex;
  width: 100%;
}
.left_content{
  width: 40px;
  background: gray;
}
.right_content{
  width: 40px;
  background-color: green;
}
.center_content{
  flex: 1;
  background: pink;
}
</style>

父组件：

<template>

<div>

<Layout>

        <template v-slot:left>

          我是左侧部分

          <!-- ps:另外老版本的写法会写成slot="left" 这个写法 新版本已废弃建议使用 v-slot:left -->\


        </template>

         <template v-slot:center>

          我是中间部分

        </template>

         <template v-slot:right>

          我是右边部分

        </template>

    </Layout>

 </div>

</template>



<script>

import Layout from './components/layout'

export default {

  name: 'app',

  components: {

    Layout

  },


}