Vue3、element-plus和Vue2、elementUI的一些转换

• 插槽

Vue3<template #default="scope"></template>
<template #footer></template>Vue2<template slot-scope="scope"></template>
<template slot="footer"></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,};
},

• 方法定义

Vue3const setAuthorityOptions = (AuthorityData, optionsData) => {});Vue2methods: {setAuthorityOptions(AuthorityData, optionsData) {},},

Vue3// 分页const handleSizeChange = (val) => {pageSize.value = valgetTableData()}Vue2methods: {// 分页handleSizeChange(val) {this.pageSize = val;this.getTableData();},},

• mounted

Vue3
initPage()Vue2mounted() {this.initPage();},

• watch

Vue3
watch(() => tableData.value, () => {setAuthorityIds()
})Vue2
watch: {tableData(val, oldVal) {this.setAuthorityIds();},
},

• 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-buttontype="primary"link@click="scope.row.visible = false">取消</el-button><el-buttontype="primary"@click="deleteUserFunc(scope.row)">确定
</el-button>

Vue2

<el-buttontype="text"@click="scope.row.visible = false">取消</el-button><el-buttontype="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
 

this.$refs.userForm.resetFields()

• 表单校验

Vue3

<el-formref="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-formref="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.athis.$parent.b = this.b}
}