Vue插槽

小白学习笔记：Vue插槽的使用

---

前言

Vue插槽可以由父组件向子组件传递HTML结构，主要解决如下问题：
 应用同一个子组件展示不同的内容（此处的内容指的是DOM结构，不是单纯的数据。）
 通俗表示：在子组件中挖坑，在父组件中填坑

---

提示：以下是本篇文章正文内容，仅供参考，如有问题，欢迎各位大神批评指正，感谢，感谢！

一、默认插槽

在子组件就挖一个坑，父组件只要有东西就往坑里填。
示例：在Father组件中，想应用三次Son组件，并且根据需求，每个Son组件需要调整DOM结构。

//父组件
<div id="Father">
    <Son title="美食">
      <img src="./statics/goubao.png" alt="">
    </Son>
    <Son title="游戏">
      <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
      </ul>
    </Son>
    <Son title="电影">
      <h3>我是电影</h3>
    </Son>
  </div>
//子组件
  <div class="Son">
    <h1>{{title}}</h1>    //每个组件都有的结构
    <slot></slot>		  //根据父组件传递的结构动态改变
  </div>

二、具名插槽

在子组件挖坑的时候，给每个坑起好名字，到时候根据名字往坑里填东西
 子组件：挖坑的时候 命名;

//子组件
  <div class="son">
    <h1>{{title}}</h1>
    <slot name="center"></slot>
    <slot name="footer"></slot>
  </div>

 父组件：填坑的时候要指名道姓，给谁填坑；有三种填坑方式

//父组件
<div id="myApp">
    //方式一：两部分内容分别填给两个插槽，但是对于footer插槽，填了两次，这合理？这不合理！
    <Son title="美食">
      <img slot="center" src="./statics/豆包.png" alt="">
      <div slot="footer" class="footer">
        <a href="https://www.baidu.com">链接111</a>
        <a href="https://www.baidu.com">链接222</a>
        <a href="https://www.baidu.com">链接333</a>
      </div>
      <h3 slot="footer">我是美食</h3>
    </Son>
    //方式二：既然都是给footer插槽的，那就把他们包在一个div里，那这样的问题就是莫名给DOM结构多包了一层div
    <Son title="游戏">
      <ul slot="center">
        <li>111</li>
        <li>222</li>
        <li>333</li>
      </ul>
      <div slot="footer">  //就是这一层div，是多余的
        <div class="footer">
          <a href="https://www.baidu.com">链接111</a>
          <a href="https://www.baidu.com">链接222</a>
          <a href="https://www.baidu.com">链接333</a>
        </div>
        <h3>我是美食</h3>
      </div>
    </Son>
    //方式三：利用template，页面渲染后，标签消失，并且也可以换一种写法 slot="xxx"变为v-slot:xxx
    <Son title="电影">
      <h3 slot="center">我是电影</h3>
      <template v-slot:footer>
        <div class="footer">
          <a href="https://www.baidu.com">链接111</a>
          <a href="https://www.baidu.com">链接222</a>
          <a href="https://www.baidu.com">链接333</a>
        </div>
        <h2>我是电影</h2>
      </template>
    </Son>
  </div>

三、作用域插槽

数据在子组件中，但是DOM结构在父组件，所以要进行数据传递。
专业：数据在组件自身，但是根据数据生成的DOM结构由父组件指定
 使用template标签中的slot-scope属性

//父组件
  <div id="myApp">
    <Son title="games"
      <template slot-scope="data">
        <ul>
          <li v-for="(v,i) in data.items" :key="i">{{v}}</li>
        </ul>
      </template>
    </Son>
    <Son title="games">
      <template slot-scope="data">
        <ol>
          <li v-for="(v,i) in data.items" :key="i">{{v}}</li>
        </ol>
      </template>
    </Son>
    <Son title="games">
      <template slot-scope="{items}">
        <h4 v-for="(v,i) in items" :key="i">{{v}}</h4>
      </template>
    </Son>
  </div>
 //子组件  默认插槽、传递数据
   <div class="son">
    <h1>{{title}}</h1>
    <slot :items="items" ></slot>
  </div>

注意：

1. 必须使用template标签
2. 使用slot-scope属性或者scope属性，都可
3. 使用data或者es6语法{}接受参数，都可

Tips

 1.插槽中DOM结构的样式，可以设置在父组件，也可以设置在子组件