V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
17681880207
V2EX  ›  问与答

关于 Vue 使用的 2 个小问题, setup 和表单。

  •  
  •   17681880207 · 2021-11-15 12:14:58 +08:00 · 942 次点击
    这是一个创建于 1082 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Question 1

    使用了一段时间的 Vue3 之后,发现了一个问题,就是 setup 函数的 return 会变成非常的长(如下面的展示),想请教下大家有没有更好的办法?

    setup() {
      // ... 省略其他部分
      return {
        SOURCES,
        STATUS,
        getDictLabel,
        moment,
        filterFormRef,
        filterForm,
        qjConceptsInFilterForm,
        handleQjConceptSearchInFilterForm,
        hospitalItemsInFilterForm,
        handleHospitalItemsSearchInFilterForm,
        tableLoadingState,
        tableData,
        pagination,
        total,
        pageSizes,
        layout,
        handleTableIndex,
        handleCurrentChange,
        handleSizeChange,
        handleSearch,
        handleReset,
        qjConceptsInDialog,
        handleQjConceptSearchInDialog,
        hospitalItemsInDialog,
        handleHospitalItemsSearchInDialog,
        itemForm,
        itemFormRef,
        itemFormRules,
        itemDialog,
        handleItemDialogOpen,
        handleItemDialogClose,
        handleItemDialogSubmission,
        handleItemDelete
      }
    }
    

    Question 2

    大家一般在写表单的时候,是直接一项一项写(例如:代码块 1 )还是会抽离出一个配置文件,再遍历渲染出来呀(例如:代码块 2 )? 代码块 1 的问题就是 template 中的代码量很大,而代码块 2 的问题就是,要定义的类型非常多,比如光 select 就要定义普通 select 和 remote-select 等等类型,如果想要覆盖全面的话,得每一种类型都全部写上。 另外,我知道每一种方法都有其优势和弊端,我只是想向大家请教下,大家主流的做法,或者有更好的解决方案?

    代码块 1

    <el-form :model="form">
      <el-form-item
        label="用户名"
        prop="username">
        <el-input 
          v-model="form.username"
          placeholder="用户名"/>
      </el-form-item>
      <el-form-item
        label="手机号"
        prop="phone">
        <el-input 
          v-model="form.phone"
          placeholder="手机号"/>
      </el-form-item>
    </el-form>
    

    代码块 2

    // form-items.ts
    export default [
      {
        type: 'input'
        label: '用户名',
        prop: 'username',
        placeholder: '用户名',
      },
      {
        type: 'input',
        label: '手机号',
        prop: 'mobile',
        placeholder: '手机号',
      },
      {
        type: 'select',
        label: '性别',
        prop: 'gender',
        placeholder: '性别',
        options: [
          {label: '女', value: 0},
          {label: '男', value: 1}
        ]
      }
    ]
    
    // template
    <el-form :model="form">
      <el-form-item
        v-for="(item, index) in formItems"
        :key="index"
        :label="item.label"
        :prop="item.prop">
        <template v-if=item.type === 'input'"">
          <el-input 
            v-model="form.username"
            placeholder="用户名"/>
        </template>
         <template v-if=item.type === 'select'"">
          <el-select 
            v-model="form.username"
            placeholder="用户名">
            <el-option 
              v-for="(option, index) in item.options"
              :key="index"
              :label="option.label"
              :value="option.value"/>
          </el-select>
        </template>
      </el-form-item>
    </el-form>
    
    

    感谢大家答疑解惑,在下不胜感激!

    8 条回复    2021-11-15 14:59:31 +08:00
    FightPig
        1
    FightPig  
       2021-11-15 12:24:57 +08:00
    用<script setup>语法糖
    realkaiway
        2
    realkaiway  
       2021-11-15 12:29:26 +08:00 via iPhone
    Vue3.2<script lang=ts setup>了解下,内部没必要在 return ,看你这数据结构该用 vuex 放的还是用
    17681880207
        3
    17681880207  
    OP
       2021-11-15 13:55:46 +08:00
    @FightPig 谢谢🙏
    17681880207
        4
    17681880207  
    OP
       2021-11-15 13:55:52 +08:00
    @realkaiway 谢谢🙏
    imherer
        5
    imherer  
       2021-11-15 14:26:44 +08:00
    @FightPig
    @realkaiway
    话说如果用 setup 的话那是用 2 个 script 标签么?
    例如这样:
    <script setup>
    // setup 的内容
    </script>

    <script>
    // 正常的内容
    </script>
    moell
        6
    moell  
       2021-11-15 14:45:49 +08:00
    我反正都是一项一项地写,比较直观。
    FightPig
        7
    FightPig  
       2021-11-15 14:56:24 +08:00   ❤️ 1
    @imherer 一个就够 了,你可以看下 vue 的文档
    Vegetable
        8
    Vegetable  
       2021-11-15 14:59:31 +08:00
    script setup ,这套逻辑下其实体验非常像早年的 jQuery ,在一个组件内都是全局变量。目前我对这套最大的意见是 eslint 还不吃$ref 这些关键字
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2166 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 00:20 · PVG 08:20 · LAX 17:20 · JFK 20:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.