Vue 3.0 之创建关闭消息提示组件

引言

消息提示组件是现代网站常见的功能，它可以显示各种消息，例如成功通知、错误警报或信息提示。在 Vue 3.0 中，创建一个关闭消息提示组件非常简单。

设计

在开始构建组件之前，我们先来讨论一下组件的设计。我们希望组件具有以下功能：

• 可以关闭
• 可以显示不同类型的消息（例如，成功、错误、信息）
• 可以显示自定义消息

实现

定义组件

首先，我们需要定义组件。在 Vue 3.0 中，我们可以使用 defineComponent 函数来定义一个组件。

const MyAlert = defineComponent({
  props: {
    msg: String,
    type: {
      type: String,
      default: 'info'
    }
  },
  emits: ['close'],
  data() {
    return {
      visible: true
    }
  },
  methods: {
    close() {
      this.visible = false
      this.$emit('close')
    }
  },
  template: `
    <div v-if="visible" class="alert alert-{{ type }}">
      <span>{{ msg }}</span>
      <button type="button" class="close" @click="close">&times;</button>
    </div>
  `
})

注册组件

接下来，我们需要在 Vue 实例中注册组件。我们可以通过 components 选项来做到这一点。

const app = createApp({
  components: {
    MyAlert
  }
})

使用组件

最后，我们可以在模板中使用组件。

<my-alert msg="Hello World!" type="success"></my-alert>

当您运行应用程序时，您将在页面上看到一个绿色消息框，其中显示着消息 "Hello World!"。您可以单击关闭按钮来关闭消息框。

扩展

组件在Vue3.0中是非常强大的。你可以使用props来定义组件的行为，使用emits定义组件如何与父组件进行通信，template定义组件的结构，data()定义组件内部的数据。

结束语

在本文中，我们学习了如何创建一个可关闭的消息提示组件。您可以在此基础上进行扩展，创建更复杂的组件。