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

Question

为了便于使用和维护，我正忙于将我的组件从我们的项目转移到组件库中。我正在使用这个 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>

像这样使用 Prop 来显示、隐藏和控制文本

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

如果我使用组件库本身运行它，它工作正常

vue serve ./src/components/LoaderModal

但是当我从导入库的应用程序中将 showLoader 属性设置为 true 时，它​​不显示。我可以看到模式在 DOM 中，但显示设置为无。控制台中没有错误，如果我将显示更改为“阻止”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>

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://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 开发面板的 Prop 的值(value)

Update

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

Component Implementation Example Nuxt js

Answer 1

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

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

如果你使用一个数据元素作为 props 然后绑定(bind)它:

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

这是工作 demo你的codesandbox