- 插槽
Vue3
<template #default="scope"></template>
<template #footer></template>
<template #dropdown></template>
Vue2
<template slot-scope="scope"></template>
<template slot="footer"></template>
<template slot="dropdown"></template>
- JS定义
Vue3
<script setup>
defineOptions({
name: 'User',
})
</script>
Vue2
<script>
export default {
name: 'User',
}
</script>
- 变量定义和赋值
Vue3
const path = ref(import.meta.env.VITE_BASE_API + '/')
const page = ref(1)
const total = ref(0)
Vue2
const path = process.env.VUE_APP_BASE_API + '/';
data() {
return {
page: 1,
total: 0,
};
},
- 方法定义
Vue3
const setAuthorityOptions = (AuthorityData, optionsData) => {
});
Vue2
methods: {
setAuthorityOptions(AuthorityData, optionsData) {
},
},
Vue3
// 分页
const handleSizeChange = (val) => {
pageSize.value = val
getTableData()
}
Vue2
methods: {
// 分页
handleSizeChange(val) {
this.pageSize = val;
this.getTableData();
},
},
- mounted
Vue3
initPage()
Vue2
mounted() {
this.initPage();
},
- watch
Vue3
watch(() => tableData.value, () => {
setAuthorityIds()
})
watch(() => props.sysDictionaryID, () => {
getTableData()
})
Vue2
watch: {
tableData(val, oldVal) {
this.setAuthorityIds();
},
},
watch: {
sysDictionaryID: {
handler(newValue, oldValue) {
this.getTableData();
},
immediate: true // 如果需要在组件挂载时立即执行一次回调函数,可以添加此选项
}
},
- elementUI的message
Vue3
import { ElMessage } from 'element-plus'
ElMessage({ type: 'success', message: '角色设置成功' })
Vue2
this.$message({ type: 'success', message: '角色设置成功' });
- nextTick
Vue3
nextTick();
Vue2
this.$nextTick();
- 组件引用
Vue3
import ChooseImg from '@/components/chooseImg/index.vue'
<ChooseImg ref="chooseImg" />
Vue2
<ChooseImg ref="chooseImg" />
import ChooseImg from '@/components/chooseImg/index.vue'
components: {
ChooseImg,
},
- button按钮图标
Vue3
<el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
Vue2
<el-button type="primary" icon="el-icon-plus" @click="addUser">新增用户</el-button>
- 确认和取消按钮
Vue3
<el-button
type="primary"
link
@click="scope.row.visible = false">
取消
</el-button>
<el-button
type="primary"
@click="deleteUserFunc(scope.row)">
确定
</el-button>
Vue2
<el-button
type="text"
@click="scope.row.visible = false">
取消
</el-button>
<el-button
type="primary"
@click="deleteUserFunc(scope.row)">
确定
</el-button>
- dialog
Vue3
<el-dialog v-model="addUserDialog"</el-dialog>
Vue2
<el-dialog :visible.sync="addUserDialog"</el-dialog>
Vue3
<template #reference></template>
Vue2
<template slot="reference"></template>
- 重置表单
Vue3
需要注意
userForm.value.resetFields()
Vue2
需要注意prop(重点)和model的位置
this.$refs.userForm.resetFields()
- 表单校验
Vue3
<el-form
ref="userForm"
:rules="rules"
:model="userInfo"
label-width="80px"></el-form>
const userForm = ref(null)
const enterAddUserDialog = async() => {
userForm.value.validate(async valid => {
if (valid) {
}
})
}
Vue2
<el-form
ref="userForm"
:rules="rules"
:model="userInfo"
label-width="80px"></el-form>
data() {
return {
userForm: null,
}}
async enterAddUserDialog() {
this.$refs.userForm.validate(async valid => {
if (valid) {
}
});
},
- 父子组件方法调用
Vue3
const emits = defineEmits(['foldChange'])
emits('foldChange', isFold.value)
Vue2
在Vue2中,你可以使用$emit方法来触发一个自定义事件,并传递参数。假设isFold是Vue实例中的一个data属性,你可以直接通过this.isFold来获取它的值,并将其作为参数传递给$emit方法。
this.$emit('foldChange', this.isFold);
- 父子组件传值
Vue3
defineProps({
target: {
type: Object,
default: null,
},
targetKey: {
type: String,
default: '',
},
})
Vue2
props: {
target: {
type: Object,
default: null,
},
targetKey: {
type: String,
default: '',
},
},
Vue3
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
Vue2
export default {
data() {
return {
a: 1,
b: 2
}
},
mounted() {
this.$parent.a = this.a
this.$parent.b = this.b
}
}