vue.js 相关问题

如何在Vue 3中添加对全局组件的类型支持？

所以我有组件1， 定义属性<{ msg: string }>() {{ 消息 }} 所以我有Component1， <!-- Component1 --> <script lang="ts" setup> defineProps<{ msg: string }>() </script> <template> <p>{{ msg }}</p> </template> 然后我全局注册， // main.ts import { createApp } from "vue" import App from "./App.vue" import Component1 from "./Component1.vue" const app = createApp(App) app.component("Component1", Component1) app.mount("#app") 后来我用它作为， <script setup lang="ts"></script> <template> <Component1 /> </template> 但是我没有得到 Component1 的 props 类型推断。那么如何为这个全局组件添加打字稿支持呢？ vue包导出一个GlobalComponents接口，可以使用全局组件的定义来增强。例如，您可以在 src/global-components.d.ts 中添加模块增强，如 Volar 文档中看到的 : // src/global-components.d.ts import Component1 from '@/components/Component1.vue' declare module '@vue/runtime-core' { export interface GlobalComponents { Component1: typeof Component1, } } 我发现 @tony19 的答案几乎是正确的 — Volar 识别了该组件，但没有提供正确的类型提示。相反，我发现我需要延长vue // src/global-components.d.ts import Component1 from '@/components/Component1.vue' declare module 'vue' { export interface GlobalComponents { Component1: typeof Component1, } } 其他解决方案对我不起作用。现在我们有了 vue-tsc 和新的 Vue VSCode 插件，事情的工作方式可能与以前有所不同。 经过多次尝试和错误，我终于找到了一个适合我的解决方案： import "@vue/runtime-core"; declare module "@vue/runtime-core" { export interface GlobalComponents { Component1: typeof Component1; } } 在 vue 模块中定义接口对我来说不起作用（vue 包似乎确实从 @vue/runtime-core 重新导出了所有内容，但 @vue/runtime-core 似乎没有导出接口 GlobalComponents，因此声明该界面可能会将其放入 vue 包中，而不是在 @vue/runtime-core 中对其进行扩充）。此外，导入在同一文件中增强接口的模块似乎也至关重要。

在 nuxtServerInit 中调度操作时 ECONNREFUSED

我正在将 Nuxt 应用程序转换为 SSR - 因为我想使用 nuxtServerInit 和 asyncData。这些是我为转换它而采取的步骤。 从 nuxt.config.js 中删除 ssr: false 派遣活动...

无法通过 Vue 3 中的 $slots 对象循环将所有插槽从父级传递给子级

我无法循环遍历 Vue 3 中的 $slots 对象以将所有插槽从父组件传递到子组件，$slots 对象在子组件中似乎为空。 我如何循环遍历 $slots 对象来传递所有...

vue.js 无法正确将 v-model 绑定到对象值

下面这 2 个 v 模型绑定是否有不同的行为？ // 使用 FormExample 的组件 const fullName = someObject.fullName <

Vuetify 自定义图标字体

我想在我的应用程序中实现一些自定义图标，该应用程序也已经使用了 MDI 图标。 问题是，如果我使用带有我为其创建的别名的自定义图标，仍然会......

如何根据 v-select Vue 库中的错误状态使用条件类自定义输入元素

我尝试根据条件放置类“has-error”并处理该 v-select 的验证消息，但我不知道如何实现这一点 https://vue-select.org/ 我尝试根据条件放置类“has-error”并处理该 v-select 的验证消息，但我不知道如何实现这一点 https://vue-select.org/ <v-select v-model="add.city" :options="currentCities" :label="$store.getters['GET_LANG_NAME'] === 'ar' ? 'nameAr' : 'nameEn'" :placeholder="$t('addresses.addCity')" required class="select porder-radius-5 text-gray input_fixed-height" :class="{ 'text-align-right': $store.getters['GET_LANG_NAME'] === 'ar' , 'has-error': errors.has('addAddressForm.city') }" > </v-select> 我尝试使用 Scoped slot 来处理这个问题，但什么也没发生 <v-select v-model="add.city" :options="currentCities" :label="$store.getters['GET_LANG_NAME'] === 'ar' ? 'nameAr' : 'nameEn'" :placeholder="$t('addresses.addCity')" required class="select porder-radius-5 text-gray input_fixed-height" :class="{ 'text-align-right': $store.getters['GET_LANG_NAME'] === 'ar' }" > <template #search="{ search, attrs, events }"> <input type="search" v-bind="attrs" v-on="events" class="vs__search" :class="{ 'has-error': errors.has('addAddressForm.city') }" /> </template> </v-select> 确保 errors 具有反应性。例如将其包裹在 reactive: <script setup> import { reactive } from 'vue' const reactiveErrors = reactive(errors) </script> 使用 errors.has('addAddressForm.city') 创建一个计算函数： <script setup> import { computed } from 'vue' const errorClass = computed(() => reactiveErrors.has('addAddressForm.city')) </script> 在您的出价类中调用此计算函数： <template> <input :class="{ 'has-error': errorClass }" /> </template>

Vue 3 中的 Vue.component 替代方案

我正在使用 Vue 和 Laravel Mix。在 Vue 版本 2 中，我可以这样做： 1.资源/js/app.js： 从“vue”导入 Vue； 从 './MyComponent' 导入 MyComponent； Vue.component('我的组件', MyCom...

在前端使用 Joi 包时无法抛出自定义错误消息

这是我第一次尝试在前端使用 joi，我面临的问题是，当我尝试使用错误数据时，我没有收到自定义错误。 这是我在validation.js中的代码 导入Joi ...

vue js 的 Apex 图表启用图例系列的工具提示

在 Apex 饼图中，我需要在将鼠标悬停在图例上时启用默认工具提示如何执行此操作。 图表选项：{ 图表： { 宽度：380， ...

如何减少v-table vuetify中列之间的间距？

我正在尝试调整v-table内表格和列的宽度，并希望使表格更紧凑。但是，他们都没有工作。 我希望这张桌子的宽度尽可能最小...

插槽作为 Vue 中另一个插槽的父级

本质上我正在尝试编写一个工具提示组件，并且我希望工具提示对话框相对于工具提示的源绝对定位。为了实现这一点，我需要...

如何使用新数据从惯性后调用重定向回惯性

我有laravel+vue+inertia的情况； 在我的 VUE 组件中，我有一个表单将 post 请求发送到 Laravel 后端： 我有laravel+vue+inertia的情况； 在我的 VUE 组件中，我有一个表单将 post 请求发送到 Laravel 后端： <form @submit.prevent="submit"> <button type="submit">GO</button> </form> 还有： function submit() { Inertia.post("/api/myMethodInController") } 在 Laravel 控制器中，我获取一些数据，我想将其发送回请求来源的页面。我的控制器功能以： 结尾 return Inertia::render('ComponentWhereRequestIsSentFrom', ['data'=>$myData]); 好的。我现在在我的 VUE 组件中获取 Laravel 数据（通过 props），但我的 URL 仍保留在 POST 目标： mydomain.com/api/myMethodInController 我可以做什么来重定向到初始 URL，但使用新数据？ tnx很多！ 是 1： 使用控制器中的 myVariable 数据设置重定向。 return redirect()->back()->with([ 'myVariable' => 'foo', ]) 2:在HandleInertiaRequests中间件中定义。 public function share(Request $request) { return array_merge(parent::share($request), [ 'flash' => [ 'myVariable' => fn () => $request->session()->get('myVariable'), ], ]); } 3:在组件中获取。 <template> {{ $page.props.flash.myVariable }} </template> <script setup> import { usePage } from '@inertiajs/inertia-vue3' const myVariable = usePage().props.value.flash.myVariable </script>

如何在vue生命周期钩子中使用vuex使用async/await？

当我在 Mounted() 生命周期挂钩中的 App.vue 组件中分派一个操作时，它会在其他组件加载后运行。我在操作中使用 async/await 并安装了生命周期挂钩。 应用程序.vue 文件 方法...

Nuxt 3 中渲染阻塞 css

有没有办法从 Nuxt 3 版本中删除渲染阻塞 CSS。据我了解，Nuxt 默认内联所有样式，并添加样式表链接以便浏览器能够缓存它。这看起来合乎逻辑，...

将动态类和静态类绑定到 Vue 组件

对 Vue 有点陌生，所以我正在寻找一种更好的方法（如果有的话）来设置默认类，而无需两次使用 class 属性。 组件.vue 对 Vue 有点新，所以我正在寻找一种更好的方法（如果有的话）来设置默认类，而无需两次使用类属性。 组件.vue <template> <input class="form__control" :class="class" v-bind="$attrs"/> </template> <script> export default { props: ['class'] } </script> 使用方法 <component class="big-red" data-id="1" type="text"/> 您可以使用 数组声明： 在单个属性中绑定动态和静态类 <template> <input :class="['form__control', class]" v-bind="$attrs"/> <template>

使用 Vue.js 初始化的 HTML 表格：如何更改行颜色

我是 Vue.js 的初学者。我有一个 Vue.js 脚本，它存储一些数据以便将其放入表中。我可以设法将其放入表格中，但我不知道如何更改行中的颜色...

如何使用headlessui/vue和tailwindcss创建抽屉？

实际上我正在尝试使用 headlessui/vue 和 tailwindcss 制作一个抽屉组件。 我正在探索 vuejs 的无头 ui 文档，并试图找出那里是否有抽屉示例，但没有找到。该...

VueJS/Typescript - 在 Typescript 类中定义反应值

我遇到了这个想法，在外部类中定义 ref() 或计算值等，以获得更清晰的代码结构和更少重载的 .vue 文件。 例如我有一个像这样的 test.ts 文件。

事件被触发两次 - 由孩子和父母

我很难找出为什么 updateOptions() 函数在下面的简单示例中被触发两次。我能够识别（只需通过日志记录）组件到 f 中的 @change-event...

为什么@click 和@paste 显示 diff 属性

这是我的演示DEMO 在组件 Comp 中，我做了同样的事情，记录 props.id 当我点击comp时，id是正确的 但是当我悬停并粘贴 id 时，它总是相同的，直到我将鼠标移出一会儿...