主页 / coding / 问题 / 79427202
Accepted
moxi
Asked: 2025-02-10 21:22:17 +0800 CST

消息已添加但未显示

  • 772

PrimeVue ToastEventBus 中的 toastmessages 已添加到 DOM 中，但未显示。有人知道为什么吗？

根据这个答案，我在页面中有以下内容。

<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://unpkg.com/vue@3/dist/vue.global.prod.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript" src="https://unpkg.com/primevue/umd/primevue.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript" src="https://unpkg.com/@primevue/themes/umd/aura.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </head>
  <body>
    <div id="test-toastbutton"></div>
    <script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

      const app = createApp({
        setup() {
          const addToast = () => {
            PrimeVue.ToastEventBus.emit('add', { severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 })
          }

          return { addToast };
        },
        template: '<Toast /><button @click="addToast">Adding toast</button>'
      })
      app.use(PrimeVue.Config, {
        theme: {
            preset: PrimeVue.Themes.Aura
        }
      })
      app.component('Toast', PrimeVue.Toast)
      app.mount('#test-toastbutton')
    </script>
  </body>
</html>

在控制台中我看到警告：

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <Toast> 
  at <App>

我期望 toast 能够显示出来。但我只看到它们被添加到了 DOM 中：

<body>
  <div id="test-toastbutton" data-v-app="">
    <portal>
      <div class="p-toast p-component p-toast-top-right" data-pc-name="toast" pc1="" data-pc-section="root" style="position: fixed; top: 20px; right: 20px;">
        <div>
          <toastmessage message="[object Object]" templates="[object Object]"></toastmessage>
          <toastmessage message="[object Object]" templates="[object Object]"></toastmessage>
          <toastmessage message="[object Object]" templates="[object Object]"></toastmessage>
          ...
vuejs3

1 个回答

  1. Best Answer

    你导入了 Vue 两次，这总是一个坏主意。你唯一需要更改的是：

    ...
    <script type="module">
        // no more import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        const { createApp } = Vue;
...

    您已经有一个全局Vue对象，因此您应该使用它。如果您不喜欢解构语法，createApp也可以使用。Vue.createApp

    • 0

相关问题