Component是一个强大的Vue功能，允许扩展基本HTML元素以封装可重用代码。
我对 VUE 还很陌生，但试图将我在各种其他前端技术中学到的最佳实践应用到其中。其中之一是微前端方法。 到目前为止我已经能够加载我的模块了
我有一个包含函数的 JS 文件，我想将带有相应 props 的 vue 组件导入到该函数中。 我已经像这样导入了组件： 从 './component.vue' 导入组件 ...
我正在使用 Vue Js 实现一个应用程序，我有以下代码： 我正在使用 Vue Js 实现一个应用程序，并且我有以下代码： <template> <simple-page title="list-patient" folder="Patient" page="List Patient" :loading="loading"> <list-patients @patientsLoaded="onPatientsLoaded"/> </simple-page> </template> 简单页面和列表患者都是我创建的自定义组件。在 ListPatients 中，我对 Create 回调有一个 HTTP 请求，如下所示： created() { axios.get("...").then(response => { ... this.$emit('patientsLoaded'); }) }, 然后，我的目标是处理患者加载事件并更新顶部父组件上的加载道具，如下所示： data() { return { loading: true } }, methods: { onPatientsLoaded(params) { this.loading = false; } } 但是，创建的方法不会在 list-患者组件内触发。我可以完成这项工作的唯一方法是删除 :loading。 有谁可以帮忙吗？ 编辑1 简单页面代码： <template> <section :id="id"> <!-- Breadcrumb--> <breadcumb :page="page" :folder="folder"/> <!-- Breadcrumb--> <!-- Simple Card--> <simple-card :title="page" :icon="icon" :loading="loading" v-slot:body> <slot> </slot> </simple-card> <!-- Simple Card--> </section> </template> 简易卡代码： <b-card> <!-- Page body--> <slot name="body" v-if="!loading"> </slot> <!--Is loading--> <div class="loading-container text-center d-block"> <div v-if="loading" class="spinner sm spinner-primary"></div> </div> </b-card> 您的列表患者组件进入名称为“body”的插槽中。该插槽有一个 v-if 指令，因此基本上它不会被渲染，并且钩子也无法访问。也许将 v-if 更改为 v-show 会在某种程度上帮助您解决这种情况。不管怎样，你有很深的嵌套槽，这会让事情变得混乱。我通常在组件内部声明加载变量，其中将呈现获取数据。 例如： data () { return { loading: true; }; }, mounted() { axios.get('url') .then(res => { this.loading = false; }) } 并在您的模板中： <div v-if="!loading"> <p>{{fetchedData}}</p> </div> <loading-spinner v-else></loading-spinner> idk 也许这不是最佳实践解决方案 v-slot 命名槽只能在 template 标签中指示 我想您希望将传递的默认插槽作为 body 插槽放置到 simple-card 组件中？如果是这样，您应该不在 simple-card 本身中指示 v 槽，而是在您传递给它的内容中指示。 <simple-card :title="page" :icon="icon" :loading="loading"> <template v-slot:body> <slot> </slot> </template> </simple-card> 启用 vue 3 选项 API： chainWebpack: config => { config.plugin('feature-flags').tap(args => { args[0].__VUE_OPTIONS_API__ = JSON.stringify(true); args[0].__VUE_PROD_DEVTOOLS__ = JSON.stringify(false); args[0].__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = JSON.stringify(false); return args })
可以同时使用Tailwind css和Bootstrap 4吗？
我的项目目前是Vuejs，它使用BootstrapVue组件（似乎使用bootstrap 4 css）。 我正在尝试将 Tailwind css 用于新的自定义组件。 可以同时使用两者吗...
使用 Vue.js 3 将甜甜圈图添加到 Django 模板
我想使用 Vue.js 3 在 Django 模板中显示甜甜圈图。甜甜圈图将是一个组件，因为我需要经常重用此图。 到目前为止，我已经成功创建了一个简单的文本
我有一个自定义组件，我在其中传递一些数据来呈现一些CSS样式 喜欢 在我的组件中 我有一个 div 为： <div cl...</desc> <question vote="0"> <p>我有一个自定义组件，我在其中传递一些数据来渲染一些CSS样式</p> <p>喜欢</p> <pre><code><title :profile="true" :class="true"/> </code></pre> <p>在我的组件中</p> <p>我有一个div：</p> <pre><code><div class="tabletitle"> </code></pre> <p>我想如果我的自定义类：class是true，我应该添加一个名为flexdisplay的新类，就像</p> <pre><code><div class="tabletitle flexdisplay"> </code></pre> <p>我在这里缺少什么，我尝试将值传递给数据作为 false 但它只是抛出随机错误</p> </question> <answer tick="true" vote="0"> <p>假设您的父组件就像</p> <pre><code><title :profile="true" :showClass="true"/> <!-- modified props name from class to showClass </code></pre> <p>在你的子组件中，正如你所说，你有一个像下面这样的div</p> <pre><code><div class="tabletitle"> </code></pre> <p>你可以做的就是将上面的div更改为下面的格式</p> <pre><code><div :class="['tabletitle', {'flexdisplay': enableClass}]"> <!-- where enableClass will be a computed property </code></pre> <p>在子组件的 script 标签内，定义 props 和计算属性，如下所示</p> <pre><code><script> export default { props: { showClass: { type: Boolean, default: false }, } computed: { // The reason I am doing with computed is for better reactivity enableClass() { return this.showClass; } } } </script> </code></pre> </answer> <answer tick="false" vote="-1"> <p>您可以使用<a href="https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes" rel="nofollow noreferrer">类条件语法</a></p> <pre><code><div :class="{ "active": isActive }"></div> </code></pre> <p>如果 <pre><code>active</code></pre> 条件为 <pre><code>isActive</code></pre><pre>，这将放置 </pre><code>true</code></p> 类 <p><em>注意</em>，您可以组合 <pre><code>class</code></pre> 和 <pre><code>:class</code></pre> 属性来有条件地放置任一类和经典类</p> <pre><code><div class="myClass" :class="{ "active": isActive }"></div> </code></pre> <p>例如，在您的情况下，如果您有布尔值 <pre><code>class</code></pre> 属性，您的组件将如下所示：</p> <pre><code><template> <div class="tabletitle" :class={"flexdisplay": isClass}> ... </div> </template> <script> export default { props: { isClass: { type: Boolean, default: true } } } </script> </code></pre> <p><strong>注意</strong>：我已将 <pre><code>class</code></pre> 属性更改为 <pre><code>isClass</code></pre>，以便更好地理解并且不要与 class 关键字混淆</p> </answer> </body></html>
我需要使用 v-for 显示 json 中的产品数组，但我无法这样做。 我正在尝试显示产品数组中的 json 数据，但它不起作用。 Vue.js 我需要使用 v-for 显示 json 中的产品数组，但我无法这样做。 我正在尝试显示产品数组中的 json 数据，但它不起作用。 Vue.js <div class="box" v-for="product in products" :key="product.id"> <h2>Produto {{ product.name }}</h2> <h3>Situação {{ product.situation }}</h3> </div> export default { data() { return { products: [], }; }, methods: { async getData() { try { const req = await fetch("http://localhost:3000/products"); const data = await req.json(); this.products = data.products; console.log("data" + data); } catch (error) { console.error("Error fetching data:", error); } }, mounted() { this.getData(); }, }, }; JSON： { "products": [ { "id": "a898", "name": "Claudio Romano", "situation": "Ativo" } ] } 您问错了问题，因为该问题与 JSON 无关。如果您对此进行调试，您会注意到 console.logs 不执行，这意味着问题更为根本，因为该方法本身并未实际运行。 根本问题是mounted()不应该在methods内部。您正在使用 Vue 的选项 API，其中 data()、methods 和 mounted 都是独立的、单独的“选项”。您需要将安装移动到方法之外，它应该是一个“兄弟”选项。 export default { data() { ... }, methods: { ... }, mounted() { this.getData(); }, }; 游乐场演示
如何在 vue javascript 应用程序中显示服务器目录中的所有图像
我正在尝试将主机（服务器）上的一个目录（图表）中存在的所有图像显示到 vue 页面中，而不必手动将它们全部列出在数据中，因此必须重建...
Vue 3 - 如何使用响应式引用并在没有 .value 的情况下进行计算？
当我们使用Options API时，我们可以在计算部分定义一些属性，在数据部分定义一些属性。所有这些都可以通过 this 引用从实例访问，...
我有一个这样的数据结构： 代理（数组）{ 0: { id: 1, machineries_ID: 2, 机械: { id: 2, en_name: '数字 MRI', pa_name: '本机', model_no: '2022', company_id: 1, ... } }, ...
图像显示在页面中间侧边栏的下方，而不是从顶部显示（Vue.Js）
我正在使用Vue.JS构建一个照片网站并遇到标题中提到的问题。我已经尝试了所有方法，经过两个小时的与 ChatGPT 的反复讨论，我决定来到这里。 T...
我正在尝试使用名为 CardRenderer.vue 的组件，它使用对象数组渲染卡片。我一次又一次地使用相同的组件来渲染数据。我遇到了这个错误“[Vue w...
[Vue3]：异步非阻塞组件渲染，使得渲染视图（页面 DOM）先于视图模型
我有一个包含许多组件的 SPA，其中一些组件包含很长的任务（~ 6 秒）。在应用程序中导航时，它看起来像是挂起的（因为任务很长）。为了解决我的问题...
如何在vue3底层组件的方法中使用v-for列表中的item id
我有一个 vue 模板，其中包含嵌套在 v-for 列表中的组件。 该组件有一个 onSave 方法，在保存时我想更新后端数据库中的该项目。 我在访问时遇到问题...
组件中的类型问题“与 IntrinsicAttributes 和 OptionBuilder 类型没有共同的属性”和 `vue-faceing-decorator`
我最近从 vue-property-decorators 转向了 vue-faceing-decorators。 我已将大部分组件移至使用面向 vue 的装饰器。 我看到很多问题都在说。 TS2559：类型 {
我正在使用渲染函数有条件地渲染子组件。这是父组件和子组件的示例： ... 我正在使用渲染函数有条件地渲染子组件。这是父组件与子组件的示例： <Parent :index="1"> <Child> ... </Child> <Child> ... </Child> <Child> ... </Child> </Parent> 在 Parent 组件的渲染函数中，我有以下代码来有条件地渲染子组件，如下所示： return () => { const content = slots.default?.(); const children = content?.filter(child => child.type === Child); const childToRender = children?.[props.index] ?? h('div') return h('div', {}, () => [childToRender]); } 代码按预期工作。 但是，我想用另一个组件包装一个子组件。例如这样： <Parent :index="1"> <Child> ... </Child> <ChildWrapper> ... </ChildWrapper> <Child > ... </Child> </Parent> 其中 ChildWrapper.vue 看起来像这样： <template> <Child> <slot/> </Child> </template> 显然过滤器函数 (content?.filter(child => child.type === Child)) 不会拾取 Child 组件中的 ChildWrapper 组件。 如果我检查 ChildWrapper VNode 的 Children 属性，它会显示一个对象（具有默认槽函数），而不是我期望的带有 Child 组件的数组。所以我的问题是如何获取嵌套的 Child 组件？ 问题背景 假设父组件是 Tab 或 Carousel 组件，子组件是 TabItem 或 CarouselItem 组件。我制作 ChildWrapper 组件的原因是为了扩展/覆盖默认 Child 组件中的一些 props。父组件和子组件都来自组件库，它不知道 ChildWrapper 是什么，因此父组件无法控制 ChildWrapper 应该如何渲染。 2 种方法。 创建一个状态（无论您使用哪个状态管理器），例如： exports defineState({ visibleChildType: 'type' }) 在父组件中，使用所需的任何逻辑设置状态值。 然后，将条件渲染条件从父级移到子级本身，同时导入状态：就像， // ChildComponent.vue <template> <div v-if="type === visibleChildType" /> </template> <script> import visibleChildType from 'parentState' </script> 将包装器移至子组件本身。 // ChildComponent.vue <template> <ChildWrapper v-if="needsWrapper"> <div /> </ChildWrapper> <div v-else=" /> </template> 这样，子组件可以在必要时包装自己，并且您的父组件不需要重构。
在vue3项目中添加了sitemap.xml。调用 http://127.0.0.1:5173/sitemap.xml 时，它显示站点地图。创建构建 localhost/sitemap.xml 后还显示站点地图。但在生产中，...
根据有关提供和注入 API 的 Vue 文档 https://vuejs.org/guide/components/provide-inject.html，您提供一个状态和函数来更新状态，如下所示：
我想访问插槽组件列表的 vue 实例。具体来说，我需要访问槽组件的 key 或 id，以便我可以在 beforeUpdate 和 Updated 中保留组件的状态
Vue3-carousal 插件未显示 Vue 组件 Laravel 中的数据？
我有一个 Laravel 10(php 8.1) 项目，其中我安装了 vue 3 来制作动态组件。 组件详细信息： 我创建了一个组件，用于显示公司团队成员的类别...