V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sundev
V2EX  ›  Vue.js

新接触 vue,关于 Vue 组件设计的一些疑问

  •  
  •   sundev · 2019-04-10 11:29:12 +08:00 · 2301 次点击
    这是一个创建于 2052 天前的主题,其中的信息可能已经有所发展或是发生改变。

    打个比方,我目前在设计一个table组件,现在要向里面传递column信息, 目前看到两种方案: 第一种是vue element方式,通过el-table-column标签向table组件传递信息,如下:

    <el-table
        :data="tableData"
        style="width: 100%"
        max-height="250">
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
      </el-table>
    

    第二种是vue-easytable方式,通过 props 的方式传递列数据,如下:

    <template>
       <v-table :columns="columns"></v-table>
    </template>
    
    <script>
        export default{
            data(){
                return {
                    multipleSort: false,
                    tableData: [ ... ],
                    columns: [
                        {field: 'email', width: 230, columnAlign: 'center'},
                        {field: 'address', width: 330, columnAlign: 'left'}
                    ],
                    titleRows: [
                        {fields: ['email'], title: '111', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'},
                        {fields: ['address'], title: '333', titleAlign: 'center',titleCellClassName:'title-cell-class-name-test2'}]
                    ]
                }
            }
        }
    </script>
    

    这两种设计方式有啥优劣?

    3 条回复    2019-04-10 13:07:33 +08:00
    66beta
        1
    66beta  
       2019-04-10 11:42:00 +08:00 via Android   ❤️ 1
    从实际业务出发吧,第一种是 slot 方式,比较灵活,也就是说它支持多种表格展示方式

    第二种就比较固定了,只传对应格式的数据进去
    sundev
        2
    sundev  
    OP
       2019-04-10 12:40:16 +08:00
    @66beta 之前写 react,所以比较喜欢第一种方式,但是如果用这种,那么需要在组件内部对 slot 进行解析,感觉比较麻烦!
    jydeng
        3
    jydeng  
       2019-04-10 13:07:33 +08:00   ❤️ 1
    可以两种结合
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   990 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 20:21 · PVG 04:21 · LAX 12:21 · JFK 15:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.