Component是一个强大的Vue功能，允许扩展基本HTML元素以封装可重用代码。
我正在尝试使用 google-pay-button 在 vue js 中通过 Gpay 进行支付集成。但我收到错误 - 无法解析组件：google-pay-button 我的代码 - 我正在尝试使用 google-pay-button 通过 vue js 中的 Gpay 进行支付集成。但我收到错误 - 无法解析组件：google-pay-button 我的代码- <google-pay-button environment="TEST" v-bind:button-type="buttonType" v-bind:button-color="buttonColor" v-bind:existing-payment-method-required="existingPaymentMethodRequired" v-bind:paymentRequest.prop="{ apiVersion: paymentRequest.apiVersion, apiVersionMinor: paymentRequest.apiVersionMinor, allowedPaymentMethods: paymentRequest.allowedPaymentMethods, merchantInfo: paymentRequest.merchantInfo, transactionInfo: transactionInfo, callbackIntents: callbackIntents, }" v-on:loadpaymentdata="onLoadPaymentData" v-on:error="onError" v-bind:onPaymentAuthorized.prop="onPaymentDataAuthorized"> </google-pay-button> <script> import "@google-pay/button-element"; export default { ... } </script> 我期望应该显示 Google pay 按钮，但它显示错误。 这是一个警告。尽管如此，该元素仍然需要生成。错误的原因是 @google-pay/button-element 不是 Vue 组件，但它们正在寻找名为 <google-pay-button> 的元素来显示按钮。 Vue.js 旨在辅助开发，因此它表明 <google-pay-button> 是一个未声明的组件，确认您是否打算以这种方式使用它。这些特殊命名的元素可以放入例外列表中。我将演示如何使用 Vite 来做到这一点。 import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { // consider any tag with a dash as a custom element isCustomElement: (tag) => tag === 'google-pay-button', // can write any condition here, the key is to cover all your custom components, even if it's as simple as tag.startsWith("google-pay-") or any other }, }, }), ], });
如何从 javascript/typescript 模块文件（导入/导出）访问 Vuex 存储？
我有一个vue应用程序。 如何从 javascript/typescript 模块文件（导入/导出）访问商店？ 例如，我创建了导出状态、操作、突变的 auth-module。 导出常量...
使用 Vue 3 构建企业级应用程序，不幸的是我还没有找到任何合适的插件来使应用程序具有响应能力。虽然有一些旧插件可以与 Vue 2 配合使用，但不能...
是否可以在 Vue3 中内联定义一个“子组件”，它可以在同一个 .vue 文件/组件中重用，但无需实际定义新的 .vue 文件（即不定义此子组件）
当我在分页的第 2 页时 我的选项看起来像这样 然后，我创建一条记录，要求我在表上调用 API 来 updateData()。 我想将我的分页重置回...
我正在尝试在 Vue.js 中单击时切换图像。我的代码无法正常工作，但这就是我想要实现的目标： 加载时图像是黑色的，单击/选择图像后，图像会切换并变成...
我有这个组合框 @change 调用 API + 填充列表 - 完成 ✅ @select doSomething() - 未完成 ❌ 我很难检测出选择了什么。前任。如果我选择“马萨诸塞州”我想要...
我有一个父组件，其中包含两个子组件。 两个子组件之一将通过 axios 调用将数据存储在数据库中。 第二个子组件将需要排队...
我正在使用vue2.7.0来封装组件。我想在组件中使用侦听器或 $listeners，但我得到了未定义
从“vue”导入{defineComponent，ref，onMounted}； 导出默认定义组件（{ 名称：“LbTab”， 道具： { 标签：{ 类型：数组， 默认...</desc> <question vote="0"> <pre><code><script> import { defineComponent, ref, onMounted } from "vue"; export default defineComponent({ name: "LbTabs", props: { tabs: { type: Array, default: () => [], }, }, setup(props, { emit, attrs, listeners }) { const active = ref(); onMounted(() => { active.value = props.tabs[0]?.name; }); const handleInput = (val) => { active.value = val; }; const isComponent = (tab) => { return typeof tab.content === "object"; }; console.log(listeners); //undefined return () => ( <el-tabs {...{ attrs, ...listeners }} value={active} onInput={handleInput} > {props.tabs.map((tab, index) => ( <el-tab-pane label={tab.label} name={tab.name} key={index}> {isComponent(tab) ? <tab.content /> : tab.content} </el-tab-pane> ))} </el-tabs> ); }, }); </script> </code></pre> <p><strong>听众未定义，这是错误的</strong></p> <p>我使用**vue2.7.0 **来封装组件。我想在组件中使用侦听器或 $listeners，但我得到了未定义</p> <p>vue3.0监听器和attrs合并，2.7应该做什么？</p> </question> <answer tick="false" vote="0"> <p>考虑使用 <pre><code>getCurrentInstance()</code></pre> 访问当前 Vue 实例（包括父组件监听器）。</p> <p>文档： <a href="https://v3.ru.vuejs.org/api/composition-api.html#getcurrentinstance" rel="nofollow noreferrer">https://v3.ru.vuejs.org/api/composition-api.html#getcurrentinstance</a></p> <p><pre><code>getCurrentInstance()</code></pre>源代码： <a href="https://github.com/vuejs/vue/blob/main/src/v3/currentInstance.ts" rel="nofollow noreferrer">https://github.com/vuejs/vue/blob/main/src/v3/currentInstance.ts</a></p> <p>用途：</p> <pre><code>import { defineComponent, getCurrentInstance } from 'vue' export default defineComponent({ setup () { const thisInstance = getCurrentInstance() function eh () { // console.log(this.$listeners) console.log(thisInstance.proxy.$listeners) } return {} } }) </code></pre> <p>它可以在 vue 2.7 中运行，我相信它也可以在 vue 3 中运行，尽管 vue 3 有自己的 <pre><code>attrs</code></pre>。</p> <p>更多关于<pre><code>getCurrentInstance()</code></pre>的信息：<a href="https://stackoverflow.com/questions/72209080/vue-3-is-getcurrentinstance-deprecated">Vue 3：getCurrentInstance() 是否已弃用？</a></p> <p>相关： <a href="https://stackoverflow.com/questions/46706737/check-if-a-component-has-an-event-listener-attached-to-it">检查组件是否附加了事件侦听器 - 堆栈内存溢出 </a> </p></answer>
我想知道是否有人有在 Vue 3 网站内运行已编译的 Vue 2 应用程序的策略。 我有一系列用 Vue 2 编写的小部件，我正在尝试在由 Vue3 和它提供支持的网站中运行
我想在运行时从 Vue 中删除之前使用 Vue.component(name, {...}) 注册的组件，这可能吗？ 我们正在实时创建许多组件
当父组件更新 props 值时，Vuejs 子组件 props 不更新
我有一个父组件和子组件设置，每当我将对象属性传递给子组件时，它只会获取初始值，并且当从父组件进行更改时不会进一步更新...
如何使用 tailwind 在 vue 3 组件中设置滑动滑块的样式？
如何使用 tailwind 在 vue 3 组件中设置滑动滑块的样式？ 你能告诉我如何做到这一点吗？我无法自己进行更改，它们只是不出现，也许您需要注册一些东西...
处理 this.$router.replace(href);在 vue 2
我是 vue 新手，正在处理我之前创建的 vue 代码。因此，有很多遗留代码太复杂，现在无法更改。 当用户...时，vue 代码可以处于两种状态之一...
我正在研究 Vue.js，我了解到每个 Vue 应用程序都是从使用 Vue 构造函数 new Vue({ })) 创建一个新的 Vue 实例开始的。 到目前为止一切都很清楚，直到我遇到了 Vue。
我有一个子组件使用 $emit 调用 Parent。我们如何从 $emit 获取返回值？ 我尝试返回一个值并在函数中包含一个变量，但它们都没有......
** 预期缩进 2 个空格，但发现有 4 个缩进** 导出默认[ { 名称：'abc'， 品种：“阿富汗猎犬”， 性别：'男'， 年龄: 9, 颜色：'灰色'， 体重：68， 定位...
出于某种原因，这在 Vue 3 中有效，这在其他所有 SO 答案中均已弃用： .描述>>> p { 红色; 下边距：1rem； } 但我已经尝试了所有的排列...
动态图像加载在 Vue 项目中不起作用！在没有动态的情况下，一切加载正确
我的模板中有这个： I have this in my template : <div class="row"> <div v-for="(page, index) in paginatedImages" :key="index" class="col-lg-4 col-md-6"> <div class="single-gallery"> <img :src="page.path" :alt="page.alt"> </div> </div> </div> And on script for loading the images dynamically I have : <script> export default { name: 'Gallery', data() { return { galleryImages: [ { path: '@/assets/images/services/whitening/whitening1.png', category: 'teeth-whitening' }, { path: '@/assets/images/services/all6/all63.png', category: 'all6' }, // Add other images with categories ], }; } </script> and the problem is that do not load the images dynamically 我尝试动态加载图像，但出现以下错误：无法加载资源：服务器响应状态为 404（未找到） 问题可能与您引用图像路径的方式有关。您需要使用“require”来使用动态路径。 <template> <div class="row"> <div v-for="(page, index) in paginatedImages" :key="index" class="col-lg-4 col-md-6"> <div class="single-gallery"> <img :src="require(page.path)" :alt="page.alt"> </div> </div> </div> </template> <script> export default { name: 'Gallery', data() { return { galleryImages: [ { path: require('@/assets/images/services/whitening/whitening1.png'), alt: 'Description of the image' }, { path: require('@/assets/images/services/all6/all63.png'), alt: 'Description of the image' }, // Add other images with categories ], }; } } </script> 我发现您当前的代码存在一个问题。 “路径”必须是一个 URL。不是文件路径。我不知道你正在使用什么捆绑程序，但如果你使用的是 vite 例如： https://vitejs.dev/guide/assets。 还应该与其他捆绑程序类似地合作。 一般有3种方式： 您可以直接导入资源。 import imgUrl from './img.png' document.getElementById('hero-img').src = imgUrl 您可以使用公共目录中的资产。 请注意：您应该始终使用根绝对路径引用公共资源 - 例如，public/icon.png 应在源代码中引用为 /icon.png。 公共资产无法从 JavaScript 导入。 使用新网址 const imgUrl = new URL('./img.png', import.meta.url).href document.getElementById('hero-img').src = imgUrl 我认为就你的情况而言，使用选项 3 是最佳的。