为了便于使用和维护,我正忙于将我的组件从我们的项目转移到组件库中。 我正在使用这个 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
最佳答案
我看到了你的codesandbox
。在 LoaderModal
组件的代码中使用 props 存在一个小错误。如果您直接为 props
使用一个值,则不需要绑定(bind) (:text
) 它。所以你可以使用下面的组件。
<LoaderModal :showLoader="true" text="Some Loading Text"/>
如果你使用一个数据元素作为 props 然后绑定(bind)它:
<LoaderModal :showLoader="true" :text="variableName"/>
这是工作 demo你的codesandbox
关于javascript - 为什么在组件库vue js中没有对组件应用Prop?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63504989/