为什么在组件库vue js中没有对组件应用Prop？

Question

为了便于使用和维护，我正忙于将我的组件从我们的项目转移到组件库中。我正在按照概述的结构和流程使用此 Vue/Nuxt Library template 。

目前我只有两个组件，一个 TestButton.vue 和一个 LoaderModal.vue .

当应用程序 imported/called 位于库中时，测试按钮工作正常，因为它按预期显示并且看起来应该是一个 mdb 按钮（我只是用来测试组件进口）。 (we use MDB as our main component lib

问题出在加载模式上。通常你会设置模态的显示属性来显示或隐藏它。

<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 中，但显示设置为 none。控制台中没有错误，如果我将显示更改为“阻止”LoadingModal 显示。

这是从 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>

My Library Package.json looks as follow

{
  "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://whosebug.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 开发面板的道具的价值

Update

下面是组件库的codesandbox项目link。该库也在 Npm 上。尝试在任何 nuxt 项目中使用 LoaderModal 组件来查看问题。 Code Sandbox Component Library

Component Implementation Example Nuxt js

Answer 1

我看到你的 codesandbox。在 LoaderModal 组件的代码中使用道具存在一个小错误。如果您直接为 props 使用一个值，则不需要绑定 (:text) 它。所以你可以使用下面的组件。

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

如果您使用数据元素作为 props 然后绑定它：

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

这是您的 codesandbox

的工作 demo

Answer 2

实际问题似乎是 mdblibrary 的所有必需 css 组件都没有被导入，尽管它们被导入到组件库的索引中。

似乎在向 nuxt 添加插件时它调用了 install 方法，没有别的。解决方案是将 css 导入组件本身并使其成为“作用域”，否则它将影响主应用程序中的组件。

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

为什么在组件库vue js中没有对组件应用Prop？

Why is Prop not applied to component in component library vue js?

javascript

vue.js

vue-component

mdbootstrap