【区分vue2和vue3下的element UI Message 消息提示组件，分别详细介绍属性，事件，方法如何使用，并举例】

最新推荐文章于 2025-05-13 15:59:27 发布

原创最新推荐文章于 2025-05-13 15:59:27 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #javascript

Element 专栏收录该内容

59 篇文章

订阅专栏

在 Vue 2 中，我们通常使用 Element UI 的 this.$message 方法来显示消息提示，而不是作为一个组件直接在模板中使用。然而，在 Vue 3 的 Element Plus 中，虽然 this.$message 的使用方式仍然保留，但官方文档可能更倾向于使用 ElMessage 服务或组件（如果提供的话）。

Vue 2 + Element UI

在 Vue 2 中，Element UI 的 Message 消息提示不是作为一个组件提供的，而是通过 Vue 的原型链上的 $message 方法来调用的。

方法:

this.$message(message: string [options: MessageOptions]): 显示消息提示。

MessageOptions 可能包含以下属性：

type: 消息类型，如 success、warning、info、error。
message: 消息内容。
duration: 显示时间，单位为毫秒，默认 2000 毫秒后消失。
center: 文字是否居中，布尔值，默认为 false。
showClose: 是否显示关闭按钮，布尔值，默认为 false。
onClose: 关闭时的回调函数，参数为被关闭的 message 实例。

示例:

<template>
  <el-button @click="showMessage">显示消息</el-button>
</template>

<script>
export default {
  methods: {
    showMessage() {
      this.$message({
        message: '这是一条消息提示',
        type: 'success',
        duration: 2000
      });
    }
  }
};
</script>

Vue 3 + Element Plus

在 Vue 3 的 Element Plus 中，this.$message 的使用方式应该与 Vue 2 中的 Element UI 类似，但你也可以通过 ElMessage 服务来调用。

方法:

ElMessage(options: MessageOptions): 显示消息提示。

MessageOptions 与 Vue 2 中的 Element UI 类似，但可能有一些细微的差别或新增的属性。

示例:

<template>
  <el-button @click="showMessage">显示消息</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus';

const showMessage = () => {
  ElMessage({
    message: '这是一条消息提示',
    type: 'success',
    duration: 2000
  });
};
</script>

请注意，由于 Element Plus 可能会更新其 API，因此建议查阅最新的 Element Plus 官方文档以获取最准确的信息和示例。

在 Vue 3 中，由于 Composition API 的引入，你可能更倾向于使用 setup 函数和 import 语句来直接调用 ElMessage 服务，而不是通过 this.$message。不过，如果你使用的是 Options API 或通过其他方式配置了 Vue 的原型链，this.$message 应该仍然可用。