说之前 先说下什么是内容分发  slot内容分发 父组件的内容和子组件的模板混在一起使用 就叫做内容分发

经常碰见的就是

<div id="app">
            <child>
                     hello  vue.js
           </child>

</div>

Vue.component("child",{
        template:"<div>hello world</div>",
    })

最后页面只会显示一个hello world 正常里面的hello vue.js是不会被渲染出发的

如果想让渲染出来的话  就得使用内容分发 slot

Vue.component("child",{
        template:"<div>hello world<slot></slot></div>",
})

还有一种如果和父组件中先用到子组件中的数据 就需要用到 slot-scope

<div id="app">
        <child>
            <template slot-scope="dataList">

                          <!-- dataList:{data:['1','2','3','4','5','6','7']} -->
                <div class="tmpl">
                   <ul>
                       <li v-for="item in dataList.data">{{item}}</li>
                   </ul>
                </div>
            </template>
        </child>
    </div>

Vue.component("child",{
        template:"<div><slot :data='arr'></slot></div>",
        data(){
            return {
                arr:['1','2','3','4','5','6','7']
            }
        }
    })

其实element-ui中 表格中的也用到了这个 道理和上面的差不多

slot-scope="scope"  scope可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

 

其实 这个还是属于vue中插槽的相关知识   后来我也写过相关的博客 建议有兴趣的童鞋可以了解了解

https://yunchong.blog.csdn.net/article/details/104253635

关注我 持续更新 前端知识   加油 努力奋斗的前端小菜鸟