vue-component 相关问题

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

是否可以从 $emit 返回一个值？

我有一个子组件使用 $emit 调用 Parent。我们如何从 $emit 获取返回值？我尝试返回一个值并在函数中包含一个变量，但它们都没有......

vuejs3 vue-component

回答 2 投票 0

预期缩进 2 个空格，但发现有 4 个缩进

** 预期缩进 2 个空格，但发现有 4 个缩进** 导出默认[ { 名称：'abc'，品种：“阿富汗猎犬”，性别：'男'，年龄: 9, 颜色：'灰色'，体重：68，定位...

vue.js vue-component

回答 1 投票 0

风格 v-html Vue 3

出于某种原因，这在 Vue 3 中有效，这在其他所有 SO 答案中均已弃用： .描述>>> p { 红色; 下边距：1rem； } 但我已经尝试了所有的排列...

css vue.js vue-component css-modules

回答 3 投票 0

动态图像加载在 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 是最佳的。

vue.js vuejs3 vue-component dynamic-image-generation

回答 2 投票 0

Vue 3 中的Error Element Plus Dynamic Tab 组件

如何将动态组件内容字段导入到 Vue 3 中 Element Plus 的选项卡中？这是可能的，谢谢你帮助我如何将动态组件内容字段导入到 Vue 3 中 Element Plus 的选项卡中？可以这样做谢谢你帮助我 <template> <el-tabs v-model="activeName" class="kk-tab h-20 bg-[var(--white)]" @tab-click="handleClick"> <el-tab-pane :label="tab.name" :name="tab.name" v-for="tab in tabName"> <template #label> <div class="text-center space-y-2"> <div class="kk text-[1.2rem] ">{{ tab.name }}</div> </div> </template> <div class="px-12 m-4"> <component :is="tab.content"></component> </div> </el-tab-pane> </el-tabs> </template> <script lang="ts" setup> import { reactive, ref } from 'vue' import { GradSection } from '~/components/setting/GradSection.vue' import { ScoreSetting } from '~/components/setting/ScoreSetting.vue' const activeName = ref('បន្ទប់') const tabName = reactive([ { desc: 'បន្ទប់', name: 'Grad Section', content: <GradSection /> }, { desc: 'ការកំណត់ពិន្ទុ', anme: 'SCORE SETTING', content: <ScoreSetting /> }, ]) const handleClick = (tab: TabsPaneContext, event: Event) => { console.log(tab, event) } </script> 请帮助我在我的 json React 中导入组件内容如何使用动态组件在文档中： https://vuejs.org/guide/essentials/component-basics.html#dynamic-components 传递给 :is 的值可以包含：已注册组件的名称字符串，或者实际导入的组件对象因此，例如，您的 tabName 对象之一应该是： { desc: 'បន្ទប់', name: 'Grad Section', content: GradSection } 其中 GradeSection 来自导入声明。我应该注意到你的进口声明并不典型。它的写法就好像 GradSection.vue 有一个命名的导出。通常，组件会导出为默认导出，特别是当您使用<script setup>时。因此，除非您知道自己正在做一些非典型的事情，否则导入声明应该是 import GradSection from '~/components/setting/GradSection.vue'

vue.js vuejs3 vue-component element-plus

回答 1 投票 0

在Cypress Vue组件测试中获取URL参数

为了测试 i18n 语言选择 Vue 组件，我想检查决定设置哪种语言的逻辑是否有效。编写 Cypress 测试以查看是否选择了 localeStorage 中存储的语言

vuejs3 vue-component cypress

回答 1 投票 0

如何在body中生成vue组件？

我想创建一个弹出组件，将其放置在主体的末尾。我在vuetify中看到了这个，但是由于结构的复杂性，我在源代码中找不到哪个函数放了

vue.js vuejs3 vue-component vuetify.js

回答 2 投票 0

解决“类型‘Vue’上不存在属性”错误

我正在使用 Typescript 和 Vuejs 来构建应用程序。我有几个独立组件 (.vue) 文件，我正在将它们导入到 Typescript (.ts) 文件中。在 Typescript 文件中，我导入...

typescript webpack vue.js vuejs2 vue-component

回答 14 投票 0

(Vue3) 使用 v-model 和 Options API 将表单组件对象与父对象链接？

我的问题很简单。我正在关注官方 Vue 文档，解释与子组件中的表单相关的 v-model 参数。这是我的代码：（应用程序Vue）导入用户名...</desc> <question vote="0"> <p>我的问题很简单。我正在关注官方 Vue <a href="https://vuejs.org/guide/components/v-model.html#v-model-arguments" rel="nofollow noreferrer">documentation</a> 解释与子组件中的表单相关的 v-model 参数。这是我的代码：</p> <pre><code>(App.Vue) <script> import UserName from './UserName.vue' export default { components: { UserName }, data() { return { firstLast: { first: 'John', last: 'Doe' } } } } </script> <template> <h1>{{ firstLast.first }} {{ firstLast.last }}</h1> <UserName v-model:first-name="firstLast.first" v-model:last-name="firstLast.last" /> </template> </code></pre> <pre><code>(UserName.vue) <script> export default { props: { firstName: String, lastName: String }, emits: ['update:firstName', 'update:lastName'] } </script> <template> <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)" /> <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)" /> </template> </code></pre> <p>以上两个文件有效！ John Doe 显示在屏幕上，您在输入中输入的任何内容都会更改名称的值。</p> <p>我的问题是，在 UserName.vue 中，我引用了两个单独的变量“first”和“last”，而我宁愿引用一个内部具有这两个属性的对象。</p> <p>我如何实现这一目标？</p> </question> <answer tick="false" vote="0"> <p>如果 modelValue 更改为对象，则输入将需要发出更新的对象。</p> <p><strong>应用程序.vue</strong></p> <pre><code><template> <h1>{{ firstLast.first }} {{ firstLast.last }}</h1> <UserName v-model="firstLast" /> </template> </code></pre> <p><strong>用户名.vue</strong></p> <pre><code><script> export default { props: { modelValue: Object }, emits: ['update:modelValue'] } </script> <template> <input type="text" :value="modelValue.first" @input="$emit('update:modelValue', { ...modelValue, first: $event.target.value })" /> <input type="text" :value="modelValue.last" @input="$emit('update:modelValue', { ...modelValue, last: $event.target.value })" /> </template> </code></pre> <p>如果您使用较新的 Composition API 和 <pre><code><script setup></code></pre>（可以访问 <pre><code>defineModel</code></pre> 宏</p>），这将变得微不足道 <h4>使用组合API</h4> <p><strong>用户名.vue</strong></p> <pre><code><script setup> const firstLast = defineModel() </script> <template> <input type="text" v-model="firstLast.first" /> <input type="text" v-model="firstLast.last" /> </template> </code></pre> </answer> </body></html>

typescript vue.js vuejs3 vue-component vue-options-api

回答 0 投票 0

如何创建并绑定按钮的vmodel

我正在使用 vue3 和 options api 如下面发布的代码所示，我知道如何创建单选按钮以及如何绑定其属性。但我的问题是如何绑定按钮的属性。作为...

vue.js vuejs2 vuejs3 vue-component

回答 1 投票 0

如何在Vue3中使用Quill文本编辑器作为组件

1 - 安装 NPM / Yarn npm install @vueup/vue-quill@latest --save # 或者纱线添加@vueup/vue-quill@latest 2 - 在组件中的使用从 '@vueup/vue-quill' 导入 { QuillEditor } 导入'@vueup/vue-

laravel vuejs3 vue-component text-editor quill

回答 1 投票 0

Vue 3.0 组件未应用 tailwind 中的类

我遇到的问题是想要使用 Tailwindcss 来设置我的 Vue 组件的样式，但它没有应用它们。它适用于我的视图和 App.vue，但不知何故不适用于组件。我遵循...

vuejs3 vue-component tailwind-css web-frontend

回答 1 投票 0

Vue表格字段格式化

我正在尝试将日期从unix时间戳格式化为人类友好的日期，但我陷入困境。我希望它以这种方式工作： ...

vue.js vue-component vuejs3 primevue

回答 2 投票 0

查看计算属性

我有一个具有以下哈希值的组件 { 计算：{ 是用户 ID: { 获取：函数（）{ 返回这个.userId？ } } } 我应该看 isUserID 还是 userId 来查找 chan...