コンポーネントライブラリvuejsのコンポーネントにPropが適用されないのはなぜですか？
使いやすさと保守性を目的として、コンポーネントをプロジェクトからコンポーネントライブラリに移動するのに忙しいです。概説した構造とプロセスに従って、このVue / Nuxtライブラリテンプレートを使用しています。
現在、TestButton.vueとLoaderModal.vueの2つのコンポーネントしかありません。
テストボタンは、ライブラリにあるときにアプリケーションからインポート/呼び出されたときに正常に機能します。期待どおりに表示され、実際には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にあることがわかりますが、表示はnoneに設定されています。コンソールにエラーはありません。Displayを「block」に変更すると、LoadingModalShowsが表示されます。
これは、DOMからコピーされたhtmlであり、そこにあることを示していますが、表示は「none」に設定されています。
<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にも追加されます。助けてください
編集以下は、vuedevパネルからの小道具の値です
更新
以下は、コンポーネントライブラリのcodesandboxプロジェクトへのリンクです。ライブラリもNpmにあります。nuxtプロジェクトでLoaderModalコンポーネントを使用して、問題を確認してください。コードサンドボックスコンポーネントライブラリ
コンポーネントの実装例Nuxtjs
回答
私はあなたを見ます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>