为什么Prop不适用于组件库vue js中的组件？

如何解决为什么Prop不适用于组件库vue js中的组件？

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

目前，我只有2个组件，分别是TestButton.vue和LoaderModal.vue。

当测试按钮位于库中时，从应用程序导入/调用时，测试按钮可以正常工作，它按预期显示，并且看起来应该像它实际上是一个mdb按钮（我刚刚用来测试组件导入）。 (we use MDB as our main component 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服务./src/components/LoaderModal

但是当我从导入库的应用程序中将showLoader prop设置为true时，它不会显示。我可以看到模式位于DOM中，但显示设置为none。控制台中没有错误，如果我将“显示”更改为“阻止” LoadingModal显示，则该错误。

这是从DOM复制的html，显示它在那里，但显示只是设置为“无”

<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开发人员面板中道具的价值

更新

以下是组件库的codesandbox项目的链接。图书馆也在Npm。尝试在任何nuxt项目中使用LoaderModal组件以查看问题。 Code Sandbox Component Library

Component Implementation Example Nuxt js

解决方法

我看到了您的codesandbox。在您的代码中使用LoaderModal组件的道具会犯一个小错误。如果您直接为props使用一个值，则不需要绑定（:text）。因此，您可以按以下方式使用该组件。

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

如果您将数据元素用作道具，则将其绑定：

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

这是您的代码框的工作demo

实际的问题似乎是，尽管已将mdblibrary所需的所有css组件都导入了组件库的索引中，但仍未导入。

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

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

为什么Prop不适用于组件库vue js中的组件？

如何解决为什么Prop不适用于组件库vue js中的组件？

解决方法

相关推荐