三分钟理解vue中的 slot

slot的作用：  一个组件中预留出插槽， 用来展示父组件传来的Dom元素

比如子组件内容如下，其中slot就是插槽，用来展示父组件插进来的内容：

<div>
    <h2>我是子组件的标题</h2>
    <slot></slot>
</div>

父组件内容如下：（child-component即是上面的子组件名称, 两个p标签即是要插入的dom元素）

<div>
<h1>我是父组件的标题</h1>
<child-component>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
</child-component>
</div>

渲染后的结果：把子组件插槽部分替换成了在父组件中插入的部分

<div>
<h1>我是父组件的标题</h1>
<div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
</div>
</div>

-----------

具名slot :   给slot起个名字，然后父组件进行对应的传值

比如： 子组件如下：有 header  main  footer三部分

<div class="component"> 
                <div class="header"> 
                    <slot name="header"></slot> 
                </div> 
                <div class="main"> 
                    <slot></slot> 
                </div> 
                <div class="footer"> 
                    <slot name="footer"></slot> 
                </div> 
</div>'

父组件进行对应传值： <h2 slot="header">标题</h2> 传给  name为 header的插槽， footer传给name为footer的槽

两个p标签传给匿名插槽

    <div id="app">
        <child-component>
            <h2 slot="header">标题</h2>
            <p>正文内容</p>
            <p>更多正文内容</p>
            <div slot="footer">底部信息</div>
        </child-component>
    </div>

子组件内声明了3个 <slot> 元素,其中在<div class="main">内的<slot> 没用使用 name 特性,它将作为默认 slot 出现,父组件没有使用 slot 特性的元素与内容都将出现在这里.
如果没有指定默认的匿名 slot, 父组件内多余的内容片段都将被抛弃.
上例最终渲染后的结果为:

<div id="app">
        <div class="container">
            <div class="header">
                <h2>标题</h2>
            </div>
            <div class="main">
                <p>正文内容</p>
                <p>更多的正文内容</p>
            </div>
            <div class="footer">
                <div>底部信息</div>
            </div>
        </div>
</div>

测试1： 

navigation-link子组件

<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

在父组件中：

<navigation-link url="/profile">
  Your Profile
</navigation-link>

渲染为：

<a class="nav-link" url="/profile">
      Your Profile
</a>

测试2：列表渲染, slot 传回行中的数据

子组件comp中：

<template>
  <ul>
    <li v-for="(item,index) in list">
      ( {{ item.id }} ) {{ item.name }} <slot :index="index" :data="item.id"> </slot>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 8, name: "aaaaa" },
        { id: 2, name: "bbbbb" },
        { id: 3, name: "ccccc" },
        { id: 4, name: "ddddd" },
        { id: 6, name: "ggggg" },
        { id: 5, name: "ttttt" },
      ],
    };
  },
};
</script>

父组件中：

    <comp> 
      <template slot-scope="slot">
        <button style="margin: 6px;padding: 6px;">index:{{slot.index}} - id:{{slot.data}}</button>
      </template>
    </comp> 

渲染效果：

作用域插槽 (2.6之前)     （ vue2.6之后版本：插槽 — Vue.js

1 子组件

<template>
  <div class="">
    <slot name="row" :obj="obj"></slot> //向父组件传递数据
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        prop1: "xxx",
        prop2: 123456,
      },
    };
  },
};
</script> 

2 父组件中

// 父组件插槽中 使用 slot-scope 接受子组件传来的值
<template>
  <div> 
    <child>
      <!--vue 2.6之前的写法-->
      <template slot="row" slot-scope="{ obj }">   
         {{obj.prop1}}  
      </template>
    </child> 
  </div>
</template>
 

经常用在列表组件中， 父组件给子组件一个数组，  子组件中 v-for 把数据展示出来， 每一行中的插槽再把该行的数据传给父组件

//子组件

<table class="zytable">
      <!-- 表头 -->
      <tr> 
        <th v-for="(head,index) in heads"> {{ head.title }} </th> 
      </tr>
      <!-- 数据 -->
      <tr v-for="(row,index) in datalist"> 
           <!-- 作用域插槽 -->
           <!-- <td v-for="head in heads"> {{row[head.name]}} </td> -->
           <slot name="row" :row="row" :index="index"></slot> 
      </tr>
</table>
export default {
  name: "zytable",
  props: { 
    heads: { type: Object }, //传来的配置  
    datalist: { type: Array } 
  }
}


//父组件
<div>
  <zytable :heads="heads" :datalist="datalist">
    <template slot="row" slot-scope="{ row, index }">
        <td v-for="head in heads">{{index}} - {{row[head.name]}} </td> 
    </template>
  </zytable>
</div>
export default {
  data: function () {
    return  {
       heads: [
        { title: "姓名", name: "name", width: "200px" },
        { title: "年龄", name: "age", width: "200px" },
        { title: "性别", name: "gender", width: "200px" },
        { title: "身高", name: "height", width: "300px" },
        { title: "体重", name: "weight", width: "200px" },
        { title: "民族", name: "minzu", width: "200px" },
        { title: "成绩", name: "chengji", width: "200px" },
        { title: "成绩2", name: "chengji2", width: "200px" },
        { title: "成绩3", name: "chengji3", width: "200px" },
        { title: "成绩4", name: "chengji4", width: "200px" },
        { title: "成绩5", name: "chengji5", width: "200px" },
      ],

      datalist: [
        {
          name: "张三丰",
          age: " 23",
          gender: "0",
          height: "168",
          weight: "111",
          minzu: " 汉族",
          chengji: " 600",
          chengji2: " 600",
          chengji3: " 600",
          chengji4: " 600",
          chengji5: " 600",
        },
        {
          name: "李四光",
          age: " 23",
          gender: "0",
          height: "168",
          weight: "111",
          minzu: " 汉族",
          chengji: " 600",
          chengji2: " 600",
          chengji3: " 600",
          chengji4: " 600",
          chengji5: " 600",
        },
        {
          name: "孙五空",
          age: " 23",
          gender: "0",
          height: "168",
          weight: "111",
          minzu: " 汉族",
          chengji: " 600",
          chengji2: " 600",
          chengji3: " 600",
          chengji4: " 600",
          chengji5: " 600",
        },
        {
          name: "赵六蛋",
          age: " 23",
          gender: "0",
          height: "168",
          weight: "111",
          minzu: " 汉族",
          chengji: " 600",
          chengji2: " 600",
          chengji3: " 600",
          chengji4: " 600",
          chengji5: " 600",
        },
        {
          name: "吴七龙",
          age: " 23",
          gender: "0",
          height: "168",
          weight: "111",
          minzu: " 汉族",
          chengji: " 600",
          chengji2: " 600",
          chengji3: " 600",
          chengji4: " 600",
          chengji5: " 600",
        },
        {
          name: "猪八戒",
          age: " 23",
          gender: "0",
          height: "168",
          weight: "111",
          minzu: " 汉族",
          chengji: " 600",
          chengji2: " 600",
          chengji3: " 600",
          chengji4: " 600",
          chengji5: " 600",
        },
      ],
    }
  }
}