렌더링 중에 액세스되는 정의되지 않은 속성 '$primevue'

Question

사례 및 질문

Vue.js를 사용하여 개인 프로젝트를 작업 중인데 PrimeVue의 FileUpload구성요소가 다음과 같은 경우에 발생합니다.

[Vue 경고]: 렌더링 중에 '$primevue' 속성에 액세스했지만 해당 속성이 인스턴스에 정의되지 않았습니다. 

내 구성 요소에서 FileUpload를 사용하려고 합니다.

<code><템플릿>
  <FileUpload 이름="demo[]" url="" @upload="onUpload" :multiple="true" :maxFileSize="1000000">
    <템플릿 #비어 있음>
      <p>업로드하려면 여기에 파일을 드래그 앤 드롭하세요. </p>
    </템플릿>
  </파일업로드>
</템플릿>

<p>이 오류는 <code>FileUpload</code>를 사용하려고 할 때만 발생합니다. 이를 제거하면 구성 요소가 제대로 작동합니다. <code>FileUpload</code> 및 <code>PrimeVue</code>는 모두 <code>main.js</code>로 가져옵니다. </p>
<pre class="lang-js Prettyprint-override"><code>'vue'에서 {createApp} 가져오기
"./router"에서 라우터 가져오기;;
"./store"에서 저장소 가져오기;;
"primevue/config"에서 PrimeVue를 가져옵니다.
"primevue/config"에서 PrimeIcon을 가져옵니다.
"./App"에서 앱 가져오기;;

const app = createApp(앱);

앱.사용(
    라우터,
    프라임뷰,
    프라임아이콘,
    가게
)

import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
'primeicons/primeicons.css' 가져오기
import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css'

"primevue/card"에서 카드 가져오기;
"primevue/menubar"에서 메뉴바 가져오기;
"primevue/fileupload"에서 FileUpload를 가져옵니다.

app.comComponent('카드', 카드)
app.comComponent('메뉴바', 메뉴바)
app.comComponent('FileUpload', FileUpload)

app.mount('#앱')

<p><strong>제가 시도한 것</strong></p>
<p>이 문제를 검색했지만 이 오류와 정확히 일치하는 유일한 항목은 GitHub에서 <code>Calendar</code> 구성 요소에 대한 이전에 종료된 문제인 문제 #808이었습니다.이 문제는 새로운 <code>PrimeVue API</code>의 주요 변경 사항으로 인해 발생합니다. 이것은 V3.1에 도입되었고 V3.7을 사용하고 있기 때문에 제 경우에는 해당되지 않습니다. </p>
<p>버전이 문제인 경우 3.1, 3.2, 3.3 등 다른 버전의 <code>PrimeVue</code>를 테스트해 보았으나 여전히 오류가 발생합니다. 따라서 실제 종속성은 여전히 ​​최신 상태입니다. </p>
<pre class="brush:php;toolbar:false;">"primevue": "^3.7.0"

솔루션이 이미 SO나 Google에 있을 수도 있지만 제 영어 실력이 너무 부족해서 이해하기 어렵거나 문제를 이해할 만큼 Vue.js에 익숙하지 않습니다.

미리 감사드립니다!

Answer 1

app.use()을 잘못 사용하고 있습니다:

으아악

app.use() 두 개의 매개변수만 허용됩니다:

• 첫 번째 매개변수: Vue 플러그인
• 두 번째 매개변수: 플러그인 옵션

또한 PrimeIcons는 플러그인이 아니므로 PrimeIcons 不是一个插件，所以不应该传递给 app.use()에 전달하면 안 됩니다.

솔루션

각 플러그인을 개별적으로 app.use()에 전달:

으아악