Почему Prop не применяется к компоненту в библиотеке компонентов vue js?

Aug 20 2020

Я занят перемещением компонентов из наших проектов в библиотеку компонентов для простоты использования и удобства сопровождения. Я использую этот шаблон библиотеки 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

Ответы

tuhin47 Aug 25 2020 at 21:52

Я вижу твой codesandbox. Есть небольшая ошибка при использовании реквизита в вашем коде для LoaderModalкомпонента. Если вы используете значение непосредственно для, propsвам не нужно его связывать ( :text). Таким образом, вы можете использовать компонент, как показано ниже.

<LoaderModal :showLoader="true" text="Some Loading Text"/>

если вы используете элемент данных в качестве реквизита, привяжите его:

<LoaderModal :showLoader="true" :text="variableName"/>

Вот рабочая демонстрация вашего codeandbox

TerblancheDaniel Aug 26 2020 at 15:57

Фактическая проблема, похоже, заключалась в том, что все необходимые компоненты css mdblibrary не импортировались, несмотря на то, что они были импортированы в индекс библиотеки компонентов.

Кажется, что при добавлении плагина в nuxt он вызывает метод установки и ничего больше. Решение заключалось в том, чтобы импортировать CSS в сам компонент и сделать его «ограниченным», иначе это повлияет на компоненты в основном приложении.

<style
scoped
>
@import "../../node_modules/mdbvue/lib/css/mdb.min.css"; 
</style>