vue-component 相关问题

Component是一个强大的Vue功能，允许扩展基本HTML元素以封装可重用代码。

Vue.js 插槽未在响应式布局中传递内容

我正在开发一个具有响应式布局的 Vue.js 项目，并且遇到了 AwPage 组件中的插槽无法呈现内容的问题。这是我的设置： index.vue：使用不同的组件...

css vue.js responsive-design vue-component

回答 1 投票 0

投资组合过滤器图片库不起作用[已关闭]

我刚开始学习vue js。我在练习的过程中遇到了一些困难。我希望，在我的 vue js 项目中，当访问者点击某个类别时，它将显示该类别中的所有图像...

vue.js vuejs3 vue-component

回答 1 投票 0

将具有反应性属性的对象作为 prop 传递会在更新父组件状态时触发子组件 onUpdated 钩子

考虑一个简单的组件 Comp.vue 文件，它仅在更新时在控制台中记录一条消息： // 比较.vue 从 'vue' 导入 { onUpdated } 更新（（）=> { 安慰...</desc> <question vote="1"> <p>考虑一个简单的组件 <pre><code>Comp.vue</code></pre> 文件，仅在更新时在控制台中记录一条消息：</p> <pre><code>// Comp.vue <script setup> import { onUpdated } from 'vue' onUpdated(() => { console.log('updated component') }) </script> <template></template> </code></pre> <p>一个 <pre><code>App.vue</code></pre> 文件会挂载 <pre><code>Comp.vue</code></pre> 并在其 <pre><code>onUpdated</code></pre> 挂钩中记录一条消息：</p> <pre><code>// App.vue <script setup> import Comp from './Comp.vue' import { ref, onUpdated } from 'vue' onUpdated(() => { console.log('updated parent') }) const text = ref('') const data = ref() </script> <template> <input v-model="text"/> <Comp/> </template> </code></pre> <p>有一个 <pre><code>text</code></pre> 引用绑定到输入元素以触发父元素上的 <pre><code>onUpdated</code></pre>。此时，在文本输入上写入只会在控制台中记录 <pre><code>'updated parent'</code></pre>。</p> <p>如果将具有反应属性的对象作为 prop 传递给 <pre><code>Comp</code></pre>，则在输入文本上写入会在控制台中同时记录 <pre><code>'updated component'</code></pre> 和 <pre><code>'updated parent'</code></pre>：</p> <pre><code><Comp :data={ data }/> </code></pre> <p>也就是说，<pre><code>Comp</code></pre> 的 <pre><code>onUpdated</code></pre> 钩子会随着 <pre><code>App</code></pre> 状态的变化而被触发。这是一个<a href="https://play.vuejs.org/#eNp9kstOwzAQRX9l5E1aqaQLWJW0EqAuYAGIx86bKJmGlMS2bKdUivLvzOTVIqUsqspzr50zM7cWd8aEhwrFSkQusbnx4NBXZiNVXhptPTzo0sDO6hKCcMkHtgejXIPF3QK0+jRp7DGFpjd3LqkSrZwHj0cPa/bOgmA+VOlG3FepJtX4ymw2h/UGaqkA2KoLDAudzYKq/4qJLSrPLzX0i5YdO1HTwWNpCnLRCSDKlak8HK5KnWKxloJJpFh2YtvcijFIqfm/6bRoefaKWAjvCGOXZ+HeaUXDasmkSOh+XqB9MT4nTClWHTNrcVHon6e25m2Fi6GefGHyPVHfuyPXpHi16NAeUIpR87HNkLBZ3r4/ty2MInVWFeT+R3xDGmHFjJ3tvlIpYZ/5WtrHdqe5yj7c9uhRuaEpBmVn0/qloOXy6C61fsK9Dm/ae7QnmuIQn4m0AYyBms7SLXsmA3IhIrwbrfqUEMLfnJxScrZq0fwCGMAHEQ==" rel="nofollow noreferrer">演示</a>。</p> <p>为了避免这种情况，可以改为传递计算属性：</p> <pre><code>const computedData = computed(() => ({ data: data.value })) // ... <Comp :data="computedData"/> </code></pre> <p>但是，我想知道为什么传递 <pre><code>{ data }</code></pre> 会直接导致 <pre><code>Comp</code></pre> <pre><code>onUpdated</code></pre> 钩子在 <pre><code>text</code></pre> 更新时被触发。</p> </question> <answer tick="true" vote="0"> <blockquote> <p>当您在模板中使用 ref 并稍后更改 ref 的值时，Vue 会自动检测更改并相应地更新 DOM...当第一次渲染组件时，Vue 会跟踪渲染期间使用的每个 ref 。稍后，当引用发生变化时，它将触发跟踪它的组件的重新渲染。 [1]</p> </blockquote> <p>我认为这意味着当 <pre><code>text</code></pre> 引用更新时，跟踪它的组件的 DOM（即 <pre><code>App</code></pre>）将重新渲染。如有必要，这会重新计算传递给 <pre><code>data</code></pre> 的 <pre><code>Comp</code></pre> 属性。然后，在问题中描述的情况下，正如 <a href="https://stackoverflow.com/questions/78164762/passing-object-with-reactive-properties-as-a-prop-triggers-child-component-onupd#comment137803992_78164762">Estus Flask 指出的那样，重新计算的 prop 会产生一个新对象，与之前传递的对象不同，从而导致 </a><code>Comp</code><pre> 状态被更新。</pre> </p>但是，如果普通对象未引用脚本部分中声明的变量，则不会重新计算 <p><code>data</code><pre> 属性。</pre> </p><code> <Comp :data="{ data: 2 }"/> </code><pre> </pre>仅当传递的对象引用脚本部分中声明的变量时，才会重新计算 prop。正如问题中提到的，如果对象包含反应数据，则可以使用计算属性。如果没有反应数据，则应在脚本部分定义该对象，然后作为 prop 传递。<p> </p><code><script setup> const reactiveData = ref(0) const regularData = 0 const computedProp = computed(() => ({ data: reactiveData.value })) const staticProp = { data: regularData } </script> <tempalte>  <Comp :data="computedProp"/> <Comp :data="staticProp"/> </template> </code><pre> </pre>参见<p>完整示例<a href="https://play.vuejs.org/#eNp9U02P0zAQ/SuDL0mlJq0Ep9KuBGgPcAC0C7ccNkqnqRfHtvyRrVTlvzN2PpqilkOkeN6b8ZvnmTP7pHXeemQbtrWV4dqBRef1QyF5o5Vx8EU1Gg5GNZDkq3AI9GSCz2DwsISKAO9wvwQlf+t9Sb/QDWk9v5CVktaBw5ODXchKk2RxiVNO+YS1F6UheH0dLivHWxzS1rMsbZR+dqXjFYHnyN5clermzCA/qCTuKDhNF7B7gPQ6t78vb0vhEbpFvHBqbEg5FxKojLRKYC5UnSZ+aFyXBqULzXX0bVe9sWQpHRw2WhCLTgBbLkkEtFmj9ih2BQvmFGwVqQS/y7Lef25BKgfjBW9HlPASyC9QHUtZo4Us60tG/ia0QfXGrtbkQyz7L+Hi3318dK1nbFezFtiSOUseHHidv1olaYyiLQUL/nKB5od2nDwq2KY3LGClEOrtW4w543E5xqsjVn9uxF/tKcQK9tOgRdNiwSbMlaZG8izAj8/fo38TSLZ6Qez/gE9I7+eDxp722cs9yZ7xotqvcdq5rH/Zx5NDacemgtDA7CK/YDTswa97rV/kvs8/xDwaEnJxXKwbewgwrdrt3foYODen8858hrdRchhRknA9pJcRnT016/4CSxhnug==" rel="nofollow noreferrer">。</a> </p>[1] <p>为什么要引用？<a href="https://vuejs.org/guide/essentials/reactivity-fundamentals.html#why-refs" rel="nofollow noreferrer">，Vue.js</a> </p> </answer></body>

vue.js vuejs3 vue-component vue-composition-api vue-props

回答 0 投票 0

Vue 可拖动移动到上一个列表

我正在使用vue js可拖动插件它对于单个列表工作得很好，但我需要使用多个列表（比如 Jira board）。我想将一张卡片（元素）从一个列表移动到另一个列表，但是它

javascript vue.js vuejs2 vue-component sortables

回答 1 投票 0

Vuetify v-app-bar-title 组件被截断，有足够的空闲空间

我在 Vue/Vuetify 应用程序中使用导航栏，并添加了 v-app-bar-title 组件来显示用户当前所在页面的名称。但是，当我加载某些页面时，标题文本

vue.js vue-component vuetify.js

回答 12 投票 0

从可组合项返回带有道具的组件

在 Vue 项目中，我有一个可组合项，它为使用它的组件提供了一些有用的参考。在我的应用程序中，很可能无论哪个组件使用可组合项，它都需要渲染

vue.js vue-component vue-composition-api composable

回答 1 投票 0

Vue Router 如何连续滚动到相同的哈希

我目前正在做一个基于Vue的网站，使用Vue Router进行路由。我处理锚链接的滚动行为的方法如下： const 路由器 = 新 VueRouter({ 路线，

javascript vue.js vue-component vue-router

回答 4 投票 0

如何确保我不会迭代 javascript / vue js 中未定义的数据集

我正在使用 d3 库编写一个图表，您可以在 d3js.org 上找到该库我希望创建一个名为的 vue 组件，它将显示一个圆环图制作它的代码相当大，所以我想把它放在...

database d3.js vuejs3 vue-component

回答 1 投票 0

vue.js - 如何在 cypress 组件测试中存根/模拟 http 请求

我有一个配置文件对话框，它可以在其中获取当前用户的数据：配置文件对话框.vue 我有一个配置文件对话框，它可以在其中获取当前用户的数据： ProfileDialog.vue <template> <div> <dialog-base :save-button-action="save" :cancel-button-action="cancelAction" title="Profile" :tab-items="['profile', 'car']" @tabidxChanged="tabidxChanged"> <v-tabs-items v-model="tabsidx"> <v-tab-item> <v-row class="mt-n1"> <v-col cols="12"> <v-text-field v-model="name" label="Name" :rules="notEmptyRule" outlined name="confirm_password" persistent-placeholder ></v-text-field> </v-col> </v-row> ... display other fields </dialog-base> </template> <script> import DialogBase from "@/components/DialogBase.vue"; import NewCarDialog from "@/components/NewCarDialog"; import {WebsocketClient} from "@/mixins/WebsocketClient"; export default { name: 'profile-dialog', components: {DialogBase,NewCarDialog}, props: { redirectionReason: {String, default: null} }, mixins: [WebsocketClient], data() { return { username: "", password: "", carType: { id: null, name: "", }, car: { licensePlate: "", }, confirm_password: "", email: "", phoneNumber: "", name: "", new_car_dialog:false, show: false, snackBar: false, snackbarText: "", tabsidx: 0, } }, computed: { ... }, methods: { ... onWebsocketEvent(message) { this.updateBatteryPercentage(message.batteryPercentage); }, async load_data() { const person_response = await this.axios.get(`/api/person/current-person`); if (person_response.status === 200) { this.name = person_response.data.name; this.email = person_response.data.email; this.username = person_response.data.username; this.phoneNumber = person_response.data.phoneNumber; this.carType = person_response.data.car.carType; this.car = person_response.data.car; } }, ... }, async mounted() { await this.load_data(); this.connect("carBatteryChange", this.car.id); }, }; </script> <style> .v-input { font-size: 1.6em; } ... </style> 我希望 /api/person/current-person http 请求模拟出模拟响应，这样我在组件测试中就可以检查数据是否正确显示。 Profile.spec.js describe("ProfileDialog", () => { beforeEach(() => { mount( { vuetify, render(h) { return h(ProfileDialog, { methods: { async load_data() { console.log("THIS NEVER CALLED"); const person_response = { id: 8, name: "myname", username: "myname", password: null, email: "[email protected]", phoneNumber: "701234567", roles: [ { id: 1, name: "role_user", }, ], car: null, }; }, }, }); }, }, { extensions: { plugins: [Vuetify] } } ); cy.wait(1000); }); it("checks if profile data is fetched properly", () => { cy.wait(5000); }); }); 实际上我尝试了很多解决方案来模拟这个请求，但我被困住了，无法完成这项工作。顺便说一句，每个 axios 请求都是用守卫拦截的： const hasRightForPage = async (to) => { const response = await Vue.prototype.axios.post(`/api/hasRightForPage`,{ route: to.path }); return response.data; } router.beforeEach(async (to, from, next) => { const resp = await hasRightForPage(to); if (resp === 'hasRight') next(); else if(resp === 'tokenExpired') next({ path: '/login', }); else next(false); }); 在我的 cypress 测试中，我总是得到：错误：请求失败，状态代码 404 希望有人能给我指出正确的方向，我如何伪造这个 api 调用，以测试我的组件是否显示当前用户的数据（来自 http 响应）您尝试过 Cypress 拦截吗？让应用程序中的 axios 调用继续进行，并在 Cypress 中使用 staticResponse 进行拦截。 before(() => { cy.intercept('/api/person/current-person', { id: 8, name: "myname", ... }) mount(...) }) 此存储库用于 React 组件测试，但对于 cy.intercept 来说，情况是相同的。以下是一些 Axios 示例： https://github.com/muratkeremozcan/multi-stage-caching/tree/master/cypress/component/network

vue.js vue-component cypress vuetify.js cypress-component-test-runner

回答 2 投票 0

如何动态添加方法到Vue组件

当我从服务器获取数据时，例如 [{methodName:mothodValue},{methodName:mothodValue}] 然后我想要动态生成方法，比如方法： { functionArray.forEach(函数（项目）{ 项目。

vuejs2 vue-component

回答 1 投票 0

谷歌地图vue错误无法解析组件

在我的项目中使用谷歌地图，但运行时不解析组件使用地图在 web 应用程序中查找位置 main.js：从“@fawmi/vue-google-maps”导入 VueGoogleMaps；常量应用程序 =

javascript vue.js google-maps-api-3 vuejs3 vue-component

回答 1 投票 0

Vue.js：观察深度嵌套组件结构中的嵌套属性更改和触发方法

我正在使用 Vue.js 应用程序，我需要在深度嵌套的组件结构中观察嵌套属性 (isChecked) 的更改。我的目标是每当

typescript vue.js vue-component vuetify.js

回答 1 投票 0

Vuejs 3 个 props 均未定义

我知道以前有人问过这个问题，但我尝试过的任何方法都不起作用，即使是官方文档我有一个视图示例 vue 组件，我想传递一个 prop 以便我可以显示它我知道以前有人问过这个问题，但我尝试过的任何方法都不起作用，甚至是官方文档我有一个视图示例 vue 组件，我想传递一个 prop 以便我可以显示它 <template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Example Component</div> <div class="card-body"> {{ title }} </div> </div> </div> </div> </div> </template> <script setup> import { defineProps } from "vue"; const props = defineProps({ title: String }) console.log(props.title); </script> app.js import { createApp } from 'vue'; import Example from './components/ExampleComponent.vue'; const app = createApp({}); app.component('example', Example); app.mount('#app'); 我这样称呼我的组件 <example :title="xgfgdgdgsgdg"></example> 模板中没有显示任何内容，config.log() 也显示 undefined 我正在使用最新版本的vue3并使用Vite构建将 prop 与 : 一起使用意味着您将 JS 表达式分配给该 prop。在你的情况下，它只是一个未定义的标识符。使用正确的表达方式： <example :title="'xgfgdgdgsgdg'"></example> 或者删除 : 使道具成为字符串： <example title="xgfgdgdgsgdg"></example>

vuejs3 vue-component vue-props

回答 1 投票 0

Vue 3，具有绑定事件和函数的动态组件

我有一个如下所示的表单字段数组，我想使用事件和函数渲染动态表单 [...{ 标签：“标志”，字段：“图像”，组成...

vue.js vuejs3 vue-component vue-composition-api

回答 1 投票 0

如何更改/覆盖 vuetify 中开关标签的默认颜色？

从vuetify的官方文档中可以看到，开关的标签有自己预先定义的颜色。我如何覆盖它们以获得黑色文本？我将开关作为全局的支柱传递

vue.js vuejs2 vue-component vuetify.js nuxt.js

回答 7 投票 0

Vue 3升级道具已传递但未在组件中显示

我有以下 Vue 3 组件 image-template-row-item ，它具有 prop templates-types 它在组件的 props 中定义：现在这个 prop 总是作为未定义传递给 comp...