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,
  };
},

• 方法定义

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()
})

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-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
  }
}