vue2项目迁移到vue3中的改动——基础积累

最近在跟着大神学习vue3的内容，发现之前vue2写的代码可以直接照搬到vue3中，但是有一些需要改动的内容，下面做一下记录。

1.定义对象时，需要指定每个属性值

例如：listQuery:{} 如果使用：listQuery.Filter 会报错提示，listQuery对象上没有Filter参数。因此定义listQuery:{Filter:null};

2.监听input组件的回车事件

vue2的写法：@keyup.enter.native，
vue3的写法：@keyup.enter
报错信息：
[vue/no-deprecated-v-on-native-modifier] '.native' modifier on 'v-on' directive is deprecated.

3.input组件中的图标

vue2的写法：
vue3的写法：

<template #prefix>
  <search-outlined />
</template>

4.button组件中的图标

vue2的版本：

<a-button type="primary" icon="search" @click="handleFilter">查询</a-button>

vue3的版本：

<a-button type="primary" @click="handleFilter">
  <template #icon>
    <search-outlined />
  </template>
  查询</a-button>

5.alert组件的使用

<a-alert type="warning" style="margin-top: 5px" showIcon>
  <template #message>
    <div style="display: flex; justify-content: space-between; align-items: center">
      <span
        >已选择<b style="margin:0 5px;">{{ checkedIds.length }}</b
        >项</span
      >
      <span @click="checkedIds = []" style="cursor: pointer;">清空</span>
    </div>
  </template>
</a-alert>

6.插槽的使用

使用插槽需要用`template`标签，然后内容为`#插槽名称`的方式来处理

例如上面的：

<template #prefix>
  <search-outlined />
</template>

<template #icon>
  <search-outlined />
</template>

7.table组件的部分使用——后续更新

7.1 columns列数据的渲染

<template #bodyCell="{ column, record }">
  <div v-if="column.dataIndex == 'action'">
    //需要通过 #bodyCell的方式来处理，然后通过v-if="column.dataIndex==xx"的方式来渲染不同的列
  </div>
</template>

7.2 a-dropdown组件的使用

<a-dropdown>
 <a class="ant-dropdown-link" href="javascript:;">
    操作
    <a-icon type="down" />
  </a>
  <template #overlay>
    <a-menu>
      <a-menu-item>
        <a-popconfirm title="确定要删除吗？" @confirm="handleDelRole(record.id)">
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </a-menu-item>
       <a-menu-item>
        <a href="javascript:;" @click="handleAdd(record)">添加</a>
      </a-menu-item>
    </a-menu>
  </template>
</a-dropdown>

7.3 如果在7.2中的代码中添加事件时，不能直接使用$refs.xxx.open(record)的方式来处理

例如上面中的@click="handleAdd(record)"，不能使用@click="$refs.xxx.open(record)"，会报错提示xxx为undefined,且无open的方法function

7.4 表格的选择row-selection

vue3的表格选择：

<a-table
 style="margin-top: 5px"
  rowKey="id"
  :columns="memberColumns"
  :dataSource="data"
  @change="handleTableChange"
  :pagination="pagination"
  :customRow="onCustomRow"
  :row-selection="{ selectedRowKeys: checkedIds, onChange: onSelectedRowChange }"
>
</a-table>

对应的script

onSelectedRowChange(selectedRowKeys) {
  this.checkedIds = selectedRowKeys;
},

点击行方法vue2和vue3的区别：
vue2的写法：

onCustomRow(record) {
  return {
    on: {
      click: (event) => {
      }, // 点击行
    },
  };
},

vue3的写法：

onCustomRow(record) {
  return {
    onclick: () => {
      ///
    },
  };
},

8.form组件

8.1 form与form-model合并了，目前只有form

<a-form :model="form" :rules="rules" @finish="handleOk" :label-col="labelCol" :wrapper-col="wrapperCol">
  <a-form-item label="名称" ref="displayName" name="displayName">
    <a-input v-model:value="form.displayName" placeholder="请输入机构名称" />
  </a-form-item>
  <a-form-item style="text-align: right" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
    <a-space>
      <a-button type="primary" ghost @click="handleCancel">取消</a-button>
      <a-button type="primary" html-type="submit">确定</a-button>
    </a-space>
  </a-form-item>
</a-form>

8.2 触发校验的只能是@finish方法，且需要html-type="submit"的按钮才能触发

8.3 prop改为name，否则无法触发rules

8.4 v-model统一改为v-model:value

8.5 finish方法

this.confirmLoading = true;
//调用自己的方法：
createUpdate(this.form)
.then(() => {
  this.visible = false;
  this.$message.success('操作成功');
  this.$emit('ok');//子组件触发父组件的ok方法。
})
.finally(() => {
  this.confirmLoading = false;
});

8.5 清空校验：

vue2的用法：使用clearValidate方法，但是vue3使用这个，则需要在setup中，而且我没有测试成功，因为我这边地方是弹窗，因此我通过设置a-modal中的destroyOnClose为false，也就是要强制销毁组件，则再次打开弹窗时，则不会有上一次的规则校验了。

9.modal组件的使用

我想要去掉a-modal的footer部分：

百度了很久，才发现一个可用的办法：
在此处附上大神的链接：vue3.0修改antdesginVue中对话框组件（＜a-modal＞）的头部样式http://t.csdn.cn/65e7L

步骤如下：

9.1 在外层套一个div，添加一个class属性，一个ref属性

9.2 在a-modal中添加 :getContainer="() => $refs.ruleFormRef"

9.3 去掉底部的样式，则先去掉按钮

<template #footer>
  <span></span>
</template>

9.4 css样式部分：

9.5 完整代码如下：

<div ref="ruleFormRef" class="tenantFormModalCls">
  <a-modal
    :title="form.id ? '编辑' : '添加根机构'"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :getContainer="() => $refs.ruleFormRef"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :model="form" :rules="rules" @finish="handleOk" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="名称" ref="displayName" name="displayName">
          <a-input v-model:value="form.displayName" placeholder="请输入机构名称" />
        </a-form-item>
        <a-form-item style="text-align: right" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
          <a-space>
            <a-button type="primary" ghost @click="handleCancel">取消</a-button>
            <a-button type="primary" html-type="submit">确定</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-spin>
    <template #footer>
      <span></span>
    </template>
  </a-modal>
</div>

先这些吧，后续会持续更新！！！
多多积累，多多收获！！！