¿Por qué Prop no se aplica al componente en la biblioteca de componentes vue js?

Aug 20 2020

Estoy ocupado moviendo mis componentes de nuestros proyectos a una biblioteca de componentes por motivos de facilidad de uso y mantenimiento. Estoy usando esta plantilla de biblioteca Vue/Nuxt siguiendo la estructura y los procesos descritos.

Actualmente solo tengo 2 componentes allí, un TestButton.vue y un LoaderModal.vue.

El botón de prueba funciona bien cuando se importa/llama desde una aplicación cuando se encuentra en la biblioteca, ya que se muestra como se esperaba y parece que debería, ya que en realidad es un botón mdb (que acabo de usar para probar las importaciones de componentes). (usamos MDB como nuestro componente principal lib

El problema es con el modo de carga. Normalmente, configuraría la propiedad show del modal para mostrarlo u ocultarlo así.

<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>

usando accesorios para mostrar, ocultar y controlar el texto así

 props: {
    showLoader: { default: true, type: Boolean },
    text: { default: "Loading", type: String },
  },

y funciona bien si lo ejecuto en la biblioteca de componentes usando

vue servir ./src/components/LoaderModal

pero cuando configuro el accesorio showLoader en verdadero desde la aplicación que importa la biblioteca, no se muestra. Puedo ver que el modal está en el DOM pero la pantalla está configurada en ninguno. No hay errores en la consola y si cambio la pantalla para "bloquear", se muestra LoadingModal.

Aquí está el html copiado del DOM que muestra que está allí, pero la visualización está configurada en "ninguno"

<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>

My Library Package.json tiene el siguiente aspecto

{
  "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"
  }
}

y el complemento se ve de la siguiente manera en mi proyecto principal.

import Vue from 'vue'
import * as componets from '@myScope/web-commons'
Vue.use(componets)

Luego, también se agrega a nuxt.config como un complemento. Por favor ayuda

EDITAR A continuación se muestra el valor de los accesorios del panel vue dev

Actualizar

El siguiente es el enlace al proyecto codesandbox para la biblioteca de componentes. La biblioteca también está en Npm. Intente usar el componente LoaderModal en cualquier proyecto nuxt para ver el problema. Biblioteca de componentes Code Sandbox

Ejemplo de implementación de componentes Nuxt js

Respuestas

tuhin47 Aug 25 2020 at 21:52

Veo codesandboxtu Hay un pequeño error al usar los accesorios en su código para el LoaderModalcomponente. Si usa un valor directamente para el props, no necesita vincularlo ( :text). Entonces puede usar el componente como se muestra a continuación.

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

si usa un elemento de datos como accesorios, vincúlelo:

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

Aquí está la demostración de trabajo de su codesandbox

TerblancheDaniel Aug 26 2020 at 15:57

El problema real parece haber sido que todos los componentes css requeridos de mdblibrary no se estaban importando a pesar de estar importados en el índice de la biblioteca de componentes.

Parece que al agregar un complemento a nuxt llama al método de instalación y nada más. La solución fue importar el css en el componente mismo y hacerlo "alcance"; de lo contrario, afectará a los componentes en la aplicación principal.

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