Prop이 컴포넌트 라이브러리 vue js의 컴포넌트에 적용되지 않는 이유는 무엇입니까?
사용 편의성과 유지 관리를 위해 구성 요소를 프로젝트에서 구성 요소 라이브러리로 옮기느라 바쁩니다. 이 Vue / Nuxt 라이브러리 템플릿 은 설명 된 구조와 프로세스에 따라 사용하고 있습니다.
현재는 TestButton.vue 및 LoaderModal.vue 두 구성 요소 만 있습니다.
테스트 버튼은 예상대로 라이브러리에있을 때 응용 프로그램에서 가져 오거나 호출 할 때 제대로 작동하며 실제로 mdb 버튼 (내가 방금 구성 요소 가져 오기를 테스트하는 데 사용함)처럼 보이는 것처럼 보입니다. (우리는 MDB를 주요 구성 요소로 사용합니다.
문제는 로딩 모달에 있습니다. 일반적으로 모달의 show 속성을 설정하여 표시하거나 숨 깁니다.
<template>
<mdb-modal centered :show="showLoader">
<mdb-modal-body class="text-center">
<div class="d-flex justify-content-center" v-if="selectedLoader==='BALL'">
<div class="spinner-grow" role="status" style="color: #005250; width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
</div>
<h3 class="block" style="margin-top:16px" v-if="longLoadingText!=null">{{ longLoadingText }}</h3>
<h3 class="block" style="margin-top:16px" v-else>{{ text }}</h3>
</mdb-modal-body>
</mdb-modal>
</template>소품을 사용하여 텍스트 표시, 숨기기 및 제어
props: {
showLoader: { default: true, type: Boolean },
text: { default: "Loading", type: String },
},구성 요소 라이브러리에서 실행하면 잘 작동합니다.
vue serve ./src/components/LoaderModal
그러나 라이브러리를 가져 오는 응용 프로그램에서 showLoader prop을 true로 설정하면 표시되지 않습니다. 모달이 DOM에 있지만 표시가 없음으로 설정되어 있음을 알 수 있습니다. 콘솔에 오류가 없으며 디스플레이를 LoadingModal 쇼를 "차단"하도록 변경하면.
다음은 DOM에서 복사 된 html입니다. 여기에 표시되어 있지만 표시는 "없음"으로 설정됩니다.
<div data-v-bfb6b926="" data-v-6a672d6c="" class="modal" style="opacity: 1;">
<div data-v-bfb6b926="" role="document" class="modal-dialog modal-dialog-centered" style="transform: translate(0px, 0px);">
<div data-v-bfb6b926="" class="modal-content">
<div data-v-c35b1502="" data-v-6a672d6c="" class="text-center modal-body">
<div data-v-6a672d6c="" data-v-c35b1502="" class="d-flex justify-content-center">
<div data-v-6a672d6c="" data-v-c35b1502="" role="status" class="spinner-grow" style="color: rgb(0, 82, 80); width: 3rem; height: 3rem;"><span data-v-6a672d6c="" data-v-c35b1502="" class="sr-only">Loading...</span></div>
</div>
<!---->
<!---->
<h3 data-v-6a672d6c="" data-v-c35b1502="" class="block" style="margin-top: 16px;">Loading some stuff</h3>
</div>
</div>
</div>
</div>내 라이브러리 Package.json은 다음과 같습니다.
{
"name": "@myScope/web-commons",
"version": "0.1.23",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --report --target lib --name web-commons ./src/index.js",
"lint": "vue-cli-service lint",
"docs:build": "vuepress build docs",
"docs:dev": "vuepress dev docs"
},
"main": "dist/web-commons.common.js",
"files": [
"src",
"assets",https://stackoverflow.com/posts/63504989/edit#
"dist/*.{js,css}"
],
"dependencies": {
"mdbvue": "^6.7.1",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/babel-preset-app": "^4.4.6",
"@vue/cli-plugin-babel": "^4.4.6",
"@vue/cli-plugin-eslint": "^4.4.6",
"@vue/cli-service": "^4.4.6",
"babel-eslint": "^10.1.0",
"eslint": "^7.3.1",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"vuepress": "^1.5.2"
}
}플러그인은 내 주요 프로젝트에서 다음과 같이 보입니다.
import Vue from 'vue'
import * as componets from '@myScope/web-commons'
Vue.use(componets)그런 다음 nuxt.config에 플러그인으로 추가됩니다. 도와주세요
편집 아래는 vue dev 패널의 소품 값입니다.
최신 정보
다음은 컴포넌트 라이브러리의 codesandbox 프로젝트에 대한 링크입니다. 도서관도 Npm에 있습니다. nuxt 프로젝트에서 LoaderModal 구성 요소를 사용하여 문제를 확인하십시오. 코드 샌드 박스 구성 요소 라이브러리
구성 요소 구현 예 Nuxt js
답변
나는 당신의 codesandbox. LoaderModal구성 요소 에 대한 코드에서 소품을 사용하는 작은 실수가 있습니다 . 에 대한 값을 직접 사용하면 props바인딩 ( :text) 할 필요가 없습니다 . 따라서 아래와 같이 구성 요소를 사용할 수 있습니다.
<LoaderModal :showLoader="true" text="Some Loading Text"/>
데이터 요소를 소품으로 사용하는 경우 바인딩합니다.
<LoaderModal :showLoader="true" :text="variableName"/>
다음은 코드 및 상자의 작동 데모 입니다.
실제 문제는 mdblibrary의 모든 필수 css 구성 요소를 구성 요소 라이브러리의 인덱스로 가져 왔음에도 불구하고 가져올 수 없다는 것입니다.
nuxt에 플러그인을 추가 할 때 install 메소드 만 호출하는 것 같습니다. 해결책은 CSS를 구성 요소 자체로 가져와 "범위 지정"으로 만드는 것이 었습니다. 그렇지 않으면 주 응용 프로그램의 구성 요소에 영향을 미칩니다.
<style
scoped
>
@import "../../node_modules/mdbvue/lib/css/mdb.min.css";
</style>