vue中element-plus使用中ElButton和el-button有什么不同

Question

element-plus官方文档中，组件的导入方式是：

ElButton

，使用方式是：

el-button

。

我的实践中，是这样使用element-plus的：

ElButton

也能正常工作。

我想知道这两种深度使用element-plus组件的方式有什么区别，对以后的开发有影响吗？

Answer 1

实际上这两个元素的区别在vueJS中的导入和使用上有所不同。实际上，当我们导入 Element Plus 组件时，通常使用 PascalCase 命名约定，其中组件名称与 Vue 组件的名称匹配，大写。因此，您可以像这样导入并注册

ElButton

组件：

import { ElButton } from 'element-plus';

export default {
  components: {
    ElButton,
  },
  // Other component options
};

然后在模板中将其用作

<el-button>

。这就是我们在模板中使用该组件的方式。在 Vue.js 中，当我们在 JavaScript 代码中使用 PascalCase 注册组件时，我们可以在模板中使用 kebab-case 。这是由于 Vue.js 不区分大小写的属性匹配。

<template>
  <el-button>Button</el-button>
</template>

在实践中，使用该组件的两种方式都可以正常工作。这只是惯例和个人喜好的问题。这是一个示例。