How to use the Teleport component in Vue 3 to implement global notification function

How to use the Teleport component in Vue 3 to implement the global notification function

In Vue 3, the Teleport component is a very useful new feature. It allows you to transfer the content of a component to a specified location in the DOM tree without changing the component's hierarchy. This makes it relatively easy to implement global notification functionality in Vue applications.

In this article, I will introduce how to use the Teleport component in Vue 3 to implement global notification functionality. First, we need to create a notification component to display notification content. You can name this component Notification.vue.

The template of the Notification.vue component can be as follows:

<template>
  <div class="notification">
    {{ message }}
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

<style scoped>
.notification {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: 10px;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}
</style>

In the above code, we define a simple notification component, which uses a props to receive the content of the notification.

Next, in the root component of the application, we need to create a Teleport component for displaying global notifications. You can name this component NotificationPortal.vue.

The template of the NotificationPortal.vue component can be as follows:

<template>
  <teleport to="#notification-portal">
    <Notification v-if="showNotification" :message="notificationMessage" />
  </teleport>
  <div id="notification-portal"></div>
</template>

<script>
import { ref, watch } from 'vue'
import Notification from './Notification.vue'

export default {
  components: {
    Notification
  },
  setup() {
    const showNotification = ref(false)
    const notificationMessage = ref('')

    watch(notificationMessage, () => {
      showNotification.value = !!notificationMessage.value
      if (showNotification.value) {
        setTimeout(() => {
          notificationMessage.value = ''
        }, 3000)
      }
    })

    return {
      showNotification,
      notificationMessage
    }
  }
}
</script>

<style>
#notification-portal {
  z-index: 9999;
}

In the above code, we use the Teleport component to transfer the Notification component to the element with the id "notification-portal", also That is outside the HTML structure of the application's root component. At the same time, we used the responsive API in Vue 3 to monitor changes in notificationMessage to control the display and hiding of notifications, and automatically hide the notification 3 seconds after the notification is displayed.

Now, we have completed writing the component of global notification. Next, we only need to use the NotificationPortal component in the root component of the application:

<template>
  <div id="app">
    <h1 id="Vue-全局通知功能演示">Vue 3全局通知功能演示</h1>
    <NotificationPortal />
    <!-- 这里是其他组件的内容 -->
  </div>
</template>

<script>
import NotificationPortal from './NotificationPortal.vue'

export default {
  components: {
    NotificationPortal
  }
}
</script>

In this way, we can trigger the display of global notifications in any component by modifying the value of notificationMessage. . For example, you can display a notification in the click event of a button by calling the following code:

notificationMessage.value = '这是一条通知的内容'

To sum up, by using the Teleport component in Vue 3, we can easily implement the global notification function. We only need to create a dedicated notification component, send it outside the root component of the application, and use Vue 3's responsive API to control the display and hiding of notifications. This way, we can easily use global notifications in our application.

The above is the detailed content of How to use the Teleport component in Vue 3 to implement global notification function. For more information, please follow other related articles on the PHP Chinese website!