如何使用Vue 3中的Teleport组件实现全局通知功能

<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>

<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;}

<template>  <div id="app">    <h1>Vue 3全局通知功能演示</h1>    <NotificationPortal />    <!-- 这里是其他组件的内容 -->  </div></template><script>import NotificationPortal from './NotificationPortal.vue'export default {  components: {    NotificationPortal  }}</script>

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