vue学习之slot 解决element-ui在table中插入链接地址

今天在element-ui的学习中要在表格中写入一个链接

<el-table-column prop="link" label="链接" width="160">
    <a>{{link}}</a>
</el-table-column>

结果什么都没有（后面的链接）

官方文档是有介绍

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

要写成这样

<el-table-column prop="link" label="链接" width="160">
    <template v-slot:default="test">
        <a :href="test.row.link">{{test.row.link}}</a>
    </template>
</el-table-column>

 效果就是前图的前面那个链接。

为此详细地学了一下Vue的slot

slot就是一个插槽，将原本不属于这个模板的的自定义的东西插入在这个插槽中

<template>
<div class="container">
  this is sub slot page
  <p>
  <slot>this is default slot content</slot>
  </p>
</div>
</template>

然后在调用时加入插槽内容

<template>
    <div>
        this is testslot page
        <testslot>
            this is insert into slot content
        </testslot>
    </div>    
</template>

结果

在做测试的时候还搞了一个低级的错误

<script>
import testslot from './TestSlot'
export default {
//开始写成了template了，结果试验了1个小时结果基本都是错的，希望各位小伙伴不要再犯这种浪费时间的错误
    components:{
        testslot
    }
}
</script>

错误解决了，之后的

插槽内容--就是把想插入的东西写在里面，万物皆可写入

编译作用域--只能使用父模板中的数据

后备内容（个人认为翻译成默认内容更好理解）--就是啥也不写的时候显示什么

具名插槽（个人认为翻译成命名插槽更好理解）--多个插槽给个名字，按名字放好

作用域插槽--这个就是解决使用子模板的数据问题了

这些内容就很好理解了

其中难点和重点以及element-ui中插入链接都是作用域插槽中的内容，且slot-scope已经被废弃，取而代之的是v-slot