API引用在Element UI (Vue 2)和Element Plus (Vue 3)中的不同
API 变动
-
样式类名变化: 一些组件的样式类名有所变动,可能需要更新你的自定义样式。
-
事件名和属性名变化: 某些组件的事件名和属性名发生了变化,需要检查 Element Plus 文档 以了解详细信息。
-
使用 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 官方文档 获取最新信息和最佳实践。