API引用在Element UI (Vue 2)和Element Plus (Vue 3)中的不同

API 变动

1. 样式类名变化: 一些组件的样式类名有所变动，可能需要更新你的自定义样式。

2. 事件名和属性名变化: 某些组件的事件名和属性名发生了变化，需要检查 Element Plus 文档 以了解详细信息。

3. 使用 setup 函数: 在 Vue 3 中，可以使用 Composition API（如 setup 函数）来组织代码，而不是使用 data 和 methods 选项。

代码示例对比

Element UI (Vue 2):

<template>
  <el-button @click="handleClick">点击我</el-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击');
    }
  }
};
</script>

 

Element Plus (Vue 3):

<template>
  <el-button @click="handleClick">点击我</el-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const handleClick = () => {
      console.log('按钮被点击');
    };

    return {
      handleClick
    };
  }
});
</script>

 

组件注册

Element UI (Vue 2): 所有组件都是全局注册的。

Element Plus (Vue 3): 可以按需引入和注册组件，提高性能。

总结

Element Plus 相比 Element UI 引入了 Vue 3 的新特性和 API，虽然大部分用法保持一致，但在组件注册、事件名、属性名、样式类名等方面有一些变化。推荐参考 Element Plus 官方文档 获取最新信息和最佳实践。