1.谈谈我理解的插槽

在我刚开始看文档的时候，我很不理解为什么要使用插槽。很多地方都是这样解释的：父组件在向子组件传递dom的时候需要用到插槽，这种解释并不能满足我的好奇心。后来想想，一个组件在复用的过程中只有些许一点点的变化，如果重写子组件的话真是做了许多无用功，这个时候就可以用到插槽了。

2.为什么我们要使用具名插槽

有时我们需要多个插槽。

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

3.我理解的具名插槽

上图代码中

<div class="container">
这个类名叫做<container>的盒子即为一个酒店
</div>

  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>

名字为<header>、<main>、<footer>分别为酒店的三间房。

不管谁想来入住上述的三间房中的任意一间，都需要带着房间钥匙，而这把所谓的房间钥匙就是我认为的具名插槽。

4.图片解释

image.png

image.png

image.png

image.png

以上4张图片可以充分的解释插槽的作用，将不同的区别写在子组件中，子组件在被复用的过程中通过父组件传来的某种特殊的标识来进行选择性的展示！

5.不多说，上代码

子组件代码

        <view class="box flex">
            <view class="logo ml-3">
            </view>
            <view class="title">
                <view>
                    <slot name="title"></slot>  //插槽一：左边红框
                </view>
            </view>
            <view class="image">
                <slot name="img"></slot>  //插槽二：右边icon
            </view>
            <view class="font">
                <view>
                    <slot name="footer"></slot>  //插槽三：右边文字
                </view>
            </view>
        </view>

而父组件怎么复用子组件呢？

方法如下：

 <template> 元素中的所有内容都将会被传入相应的插槽。
1.全写：v-slot:插槽名
                <template v-slot:title>
                    <view>精选课程</view>
                </template>
2.简写：#插槽名
        <view class="title mt-4">
            <Title>
                <template #title>
                    <view>精选课程</view>
                </template>
                <template #img>
                    <image class="img" src="../../static/title/title.png" mode=""></image>
                </template>
                <template #footer>
                    <view @click="refreshClick">换一批</view>
                </template>
            </Title>
        </view>