vue中的this.$notify与this.$message的区别与用法

Vue.js 中的 `this.$notify` 和 `this.$message` 都是用于在前端页面上显示通知信息的方法，但它们的用法和作用略有不同：

1. `this.$message` 是 Element UI 组件库提供的全局方法，用于在页面上显示简单的消息提示框，例如操作成功、操作失败等。用法示例如下：

this.$message({
  message: '操作成功',
  type: 'success'
})

2. `this.$notify` 是 Element UI 组件库提供的全局方法，用于在页面上显示更为复杂的通知信息，支持自定义通知内容和样式，例如带有标题、图标、时间戳等。用法示例如下：

this.$notify({
  title: '消息通知',
  message: '您有一条新的消息',
  type: 'info',
  position: 'bottom-right'
})

总体来说，`this.$message` 更适合简单的消息提示，而 `this.$notify` 更适合复杂的通知信息展示。需要注意的是，使用这两个方法前需要先安装并引入 Element UI 组件库。

相关问题

this.$notify.success({ title: 'Info', message: '这是一条没有关闭按钮的消息', showClose: false }); 关闭时触发自定义事件

`this.$notify.success` 是 Vue.js 中一种通知组件的使用方法，用于显示一个成功的提示信息。在这个例子中：

- `title: 'Info'` 定义了提示框的标题。
- `message: '这是一条没有关闭按钮的消息'` 设置了提示框的内容。
- `showClose: false` 表明这个提示框不包含关闭按钮。

如果你想在用户关闭这个提示框时触发一个自定义的事件，通常做法是在 `v-on` 或者 `@close` 修饰符下添加一个事件监听器。例如：

<template>
  <div @close="handleCloseNotification"></div>
</template>

<script>
export default {
  methods: {
    handleCloseNotification() {
      // 在这里处理关闭事件，比如发射一个自定义事件
      this.$emit('customEvent', { message: 'Notification closed' });
    }
  }
}
</script>

通过这种方法，当用户点击关闭按钮（默认情况下存在），`handleCloseNotification` 方法会被调用，并触发名为 `customEvent` 的自定义事件，你可以在这个事件处理器中执行额外的操作。

VM5990 addRules.vue:228 Uncaught (in promise) TypeError: _this2.$notify(...).catch is not a function at eval (VM5990 addRules.vue:228:25)

这个错误通常是由于在调用 `this.$notify` 方法时没有正确处理 Promise 的返回值而导致的。`this.$notify` 方法返回一个 Promise 对象，如果在调用该方法之后没有正确处理这个 Promise 对象，就会出现这个错误。

你可以尝试在调用 `this.$notify` 的时候，使用 `then` 方法来处理 Promise 的返回值，或者使用 `async/await` 来正确处理 Promise 对象，例如：

async someMethod() {
  try {
    await this.$notify('Notification message')
    // do something after notification is shown
  } catch (error) {
    // handle error if notification fails to show
  }
}

这样可以避免出现 `TypeError: this.$notify(...).catch is not a function` 的错误。