VUE知识内容

原创于 2021-08-17 17:58:25 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细探讨了Vue框架中的slot和slot-scope特性，通过实例解释了如何在模板中使用它们来动态渲染数据。同时，文章还介绍了Vue组件生命周期中计算属性的执行阶段，帮助读者理解何时以及如何更新视图。示例代码展示了在表格组件中利用slot和slot-scope实现数据映射和定制化列渲染。

深入理解vue中的slot与slot-scope
https://segmentfault.com/a/1190000012996217

Vue中的computed计算属性在生命周期中的执行阶段
https://blog.youkuaiyun.com/qq_42539194/article/details/112758839

1、js中，.和[]都可以获取数据中的属性值。其中.主要点的是常量，[]中则可以是常量和变量
slot是占位符，slot-scope指的是每一行数据，下面是vue中的一部分代码。table页面加载数据，占位符使用userId，然后使用userNameMap替换id，其中userNameMap中k：userId，v：姓名

        <div slot="userId" slot-scope="text">
          <div class="column-text" :title="`${text}`">{{ userNameMap[text] }}</div>
        </div>
        
const columns = [
  {
    title: '学员名字',
    dataIndex: 'userId',
    key: 'userId',
    align: 'left',
    width: '25%',
    ellipsis: false,
    scopedSlots: { customRender: 'userId' }
  }