【区分vue2和vue3下的element UI Divider 分割线组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 中，Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。而在 Vue 3 中，Element UI 的后续版本是 Element Plus，它是为 Vue 3 设计的。不过，对于 el-divider（分割线组件）来说，无论是 Element UI（Vue 2）还是 Element Plus（Vue 3），其基本的使用方式、属性和事件都非常相似，因为这是一个相对简单的组件。

Vue 2 + Element UI 的 el-divider

在 Vue 2 中，使用 Element UI 的 el-divider 组件时，你主要关注的是它的属性（Props），因为 el-divider 通常不触发事件（Events）或提供方法（Methods）供外部调用。

属性（Props）

• direction: 分割线的方向，可选值为 horizontal（水平）或 vertical（垂直），默认为 horizontal。

示例

<template>
  <div>
    <el-divider></el-divider> <!-- 默认水平分割线 -->
    <el-divider direction="vertical"></el-divider> <!-- 垂直分割线 -->
  </div>
</template>

<script>
import { Vue } from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

export default {
  // 组件选项...
};
</script>

Vue 3 + Element Plus 的 el-divider

在 Vue 3 中，使用 Element Plus 的 el-divider 组件时，情况与 Vue 2 类似，因为这是一个相对简单的组件，主要关注其属性。

属性（Props）

• direction: 同样用于指定分割线的方向，可选值为 horizontal 或 vertical，默认为 horizontal。

示例

<template>
  <div>
    <el-divider></el-divider> <!-- 默认水平分割线 -->
    <el-divider direction="vertical"></el-divider> <!-- 垂直分割线 -->
  </div>
</template>

<script>
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp({});
app.use(ElementPlus);
app.mount('#app');

export default {
  // 组件选项...
  // 注意：在 Vue 3 的单文件组件中，你通常不会在这里全局引入 Element Plus，而是在 main.js 或类似的入口文件中引入。
};
</script>

总结

对于 el-divider 组件来说，无论是 Vue 2 还是 Vue 3，其使用方式都非常简单，主要关注于 direction 属性来控制分割线的方向。由于这是一个展示性质的组件，它通常不触发事件或提供方法供外部调用。因此，在大多数情况下，你只需要根据需求设置 direction 属性即可。