Почему Prop не применяется к компоненту в библиотеке компонентов vue js?
Я занят перемещением компонентов из наших проектов в библиотеку компонентов для простоты использования и удобства сопровождения. Я использую этот шаблон библиотеки Vue / Nuxt в соответствии с описанной структурой и процессами.
В настоящее время у меня есть только 2 компонента: TestButton.vue и LoaderModal.vue.

Кнопка тестирования работает нормально при импорте / вызове из приложения, когда оно находится в библиотеке, поскольку оно отображается так, как ожидалось, и выглядит так, как должно, поскольку на самом деле это кнопка mdb (которую я только что использовал для проверки импорта компонентов). (мы используем MDB в качестве основного компонента lib
Проблема в режиме загрузки. Обычно вы устанавливаете свойство 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 значение true из приложения, которое импортирует библиотеку, оно не отображается. Я вижу, что модальное окно находится в DOM, но для отображения установлено значение «Нет». В консоли нет ошибок, и если я изменю Display, чтобы «заблокировать», то LoadingModal Shows.
Вот html, скопированный из DOM, который показывает, что он есть, но для отображения просто установлено значение «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 как плагин. Пожалуйста помоги
ИЗМЕНИТЬ Ниже приведено значение реквизита из панели vue dev

Обновлять
Ниже приведена ссылка на проект codeandbox для библиотеки компонентов. Библиотека тоже есть на Npm. Попробуйте использовать компонент LoaderModal в любом проекте nuxt, чтобы увидеть проблему. Библиотека компонентов песочницы кода
Пример реализации компонента Nuxt js
Ответы
Я вижу твой codesandbox
. Есть небольшая ошибка при использовании реквизита в вашем коде для LoaderModal
компонента. Если вы используете значение непосредственно для, props
вам не нужно его связывать ( :text
). Таким образом, вы можете использовать компонент, как показано ниже.
<LoaderModal :showLoader="true" text="Some Loading Text"/>
если вы используете элемент данных в качестве реквизита, привяжите его:
<LoaderModal :showLoader="true" :text="variableName"/>
Вот рабочая демонстрация вашего codeandbox
Фактическая проблема, похоже, заключалась в том, что все необходимые компоненты css mdblibrary не импортировались, несмотря на то, что они были импортированы в индекс библиотеки компонентов.
Кажется, что при добавлении плагина в nuxt он вызывает метод установки и ничего больше. Решение заключалось в том, чтобы импортировать CSS в сам компонент и сделать его «ограниченным», иначе это повлияет на компоненты в основном приложении.
<style
scoped
>
@import "../../node_modules/mdbvue/lib/css/mdb.min.css";
</style>