vue2.0项目改vue3.0注意事项
发布时间
阅读量：
阅读量
我觉得api肯定是必须要看的，翻到烂，改到崩溃
1、图标
1.1图标名称
大部分改动为小写换大写，例如： el-icon-edit 改为 Edit ，但是不全都这样，改不对还是看api吧
vue2.0 api ：https://element.eleme.io/#/zh-CN/component/icon
vue3.0 api ：https://element-plus.org/zh-CN/component/icon.html
1.2图标写法
vue2.0写法：
<i class="el-icon-edit"></i>
vue3.0写法：
<el-icon><Plus /></el-icon>
2、:visible.sync改为v-model
Drawer 抽屉中、el-dialogz中
vue2.0
<el-drawer :visible.sync="listenerFormModelVisible"
vue3.0
<el-drawer v-model="listenerFormModelVisible"
3、this.$set（）改为reactive或ref
参考：vue3中的this.$set怎么写呢
vue2.0写法：
<el-form size="mini" :model="listenerForm">
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.event">
<el-option label="start" value="start" />
<el-option label="end" value="end" />
</el-select>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
listenerForm: [], // 监听器列表
}
},
methods: {
open(){
this.listenerForm = {};
this.$set(this.listenerForm, "event", []);
},
save(){
if(this.listenerForm.event=="")
update(this.listenerForm);
}
}
}
</script>
vue3.0写法（好吧这样写不行 ）：
<el-form size="mini" :model="listenerForm">
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.event">
<el-option label="start" value="start" />
<el-option label="end" value="end" />
</el-select>
</el-form-item>
</el-form>
<script>
const listenerForm=ref({});
//或者
//const data = reactive({
// form: {},
//});
//const { form} = toRefs(data);
export default {
data() {
return {
}
},
methods: {
open(){
listenerForm.value = {};
listenerForm.event="";
},
save(){
if(listenerForm.value.event=="")
update(listenerForm.value);
}
}
}
</script>
如果严格改成vue3的写法改动量太大了，但是this.$set(）在vue3中又会报错，所以我改成了：
vue2：
this.$set(this.messageMap, m.id, m.name);
this.$set(this.messageMap,"-1", "无");
this.$set(this.messageMap,this.newMessageForm.id,this.newMessageForm.name);
vue3：
this.messageMap.m.id=m.name;
this.messageMap['-1']="无"
this.messageMap[this.newMessageForm.id]=this.newMessageForm.name;
4、template 插槽问题
4.1 slot="footer"改为#footer
el-dialog 中
vue2.0
<template slot="footer">
<div slot="footer" class="dialog-footer">
vue3.0
<template #footer>
<template #footer>
<div class="dialog-footer">
4.2、slot="title"改为#title
collapse中
vue2.0
<template slot="title">
vue3.0
<template #title >
4.3 slot-scope="scope"改为#default=“scope”
el-table中
vue 项目中 element el-table 表格里 使用slot=“header“ 表头数据用动态变量不更新，用#header可以自动更新
vue2：
<template slot="header" slot-scope="scope">
<template slot-scope="scope">
vue3：
<template #header #default="scope">
<template #default="scope">
4.4 slot=“dropdown”
Dropdown下面的el-dropdown-menu
vue2：
<el-dropdown-menu slot="dropdown">
vue3
<template #dropdown>
<el-dropdown-menu >
5pagination分页
vue2
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
vue3：
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
全部评论 (0)
还没有任何评论哟~