vue-component 相关问题

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

我有一个组件（一个菜单），我需要多次渲染它。我将其设置为接收一个道具，以确定在每种情况下选择哪个选项（第一个菜单应该有我有一个组件（<select>菜单），我需要多次渲染它。我将其设置为接收一个道具，以确定在每种情况下选择哪个选项（第一个菜单应选择珀斯，第二个菜单应选择墨尔本）：应用程序.vue <template> <div> <SelectMenu :selectedItem="menuASelectedItem" :options="options" /> <SelectMenu :selectedItem="menuBSelectedItem" :options="options" /> </div> </template> <script> import SelectMenu from './SelectMenu.vue'; export default { components: { SelectMenu }, data() { return { menuASelectedItem: 3, menuBSelectedItem: 2, options: [ { value: '1', label: 'Sydney' }, { value: '2', label: 'Melbourne' }, { value: '3', label: 'Perth' }, ], }; }, }; </script> 我认为我可以在组件中使用该值：选择菜单.vue <template> <select v-model="SelectedItem"> <option v-for="option in options" :key="option.value" :value="option.value"> {{ option.label }} </option> </select> </template> <script> export default { props: { selectedItem: { type: String, required: true, }, options: { type: Array, required: true, }, }, }; </script> 但这行不通。或者产生错误。它只是不选择菜单中的任何内容。通过谷歌搜索，我发现我可以通过调整组件来做到这一点，使 prop 成为局部变量： SelectMenu.vue 已修复： <template> <select v-model="localSelectedItem">  <option v-for="option in options" :key="option.value" :value="option.value"> {{ option.label }} </option> </select> </template> <script> export default { props: { selectedItem: { type: String, required: true, }, options: { type: Array, required: true, }, }, data() { // data block handles turning selectedItem into localSelectedItem return { localSelectedItem: this.selectedItem, }; }, }; </script> 所以，我的代码已经可以工作了，但我需要理解为什么它没有以第一种更明显的方式工作。这不正是道具的用途吗？ prop 是从外部发送到组件的变量。为什么不能直接使用？你不应该改变道具。在这种情况下，v-model启用双向绑定并改变道具。为了避免这种情况，您可以将其绑定到检索 prop 值的可写计算属性。设置后，将值发送给父级： <template> <select v-model="localeSelectedItem"> <option v-for="option in options" :key="option.value" :value="option.value"> {{ option.label }} </option> </select> </template> <script> export default { props: { selectedItem: { type: String, required: true, }, options: { type: Array, required: true, }, }, emits: ["update:selectedItem"], computed: { localeSelectedItem: { get() { return this.selectedItem; }, set(value) { this.$emit("update:selectedItem", value); }, }, }, }; </script> 并在父级中将其绑定如下： <template> <div> <SelectMenu v-model:selectedItem="menuASelectedItem" :options="options" /> <SelectMenu v-model:selectedItem="menuBSelectedItem" :options="options" /> </div> </template> 您可以在组件v模型中了解有关此功能的更多信息

vue.js vuejs3 vue-component

回答 0 投票 0

从 Vue 的“<script setup>”中导出函数，就像从模块中一样

我想从“”部分中的组件导出函数并在另一个组件中使用它。我尝试过这样的： <... 我想从“”部分中的组件导出函数并在另一个组件中使用它。我尝试过这样的：  <template> <h1>{{ title }}</h1> </template> <script setup> import { ref } from 'vue'; const title = ref('title'); export function set_title(new_title) { title.value = new_title; } </script>  <template> <TestHeading /> <p>Main text</p> </template> <script setup> import { TestHeading, set_title } from '../components/TestHeading.vue'; set_title('new title'); </script> 这只是给了我错误：<script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227. 省略“导出”我刚刚得到： Uncaught SyntaxError: import not found: set_title 在 TestDocument.vue 中。有办法吗？组件（TestHeading）在整个文档中只会出现一次，所以我应该能够使用像这样的全局函数来设置标题。推荐的方法是使用 defineExpose 宏公开函数，然后在子组件上使用模板引用 :  <template> <h1>{{ title }}</h1> </template> <script setup> import { ref } from 'vue'; const title = ref('title'); function set_title(new_title) { title.value = new_title; } defineExpose({ set_title }) </script>  <template> <TestHeading ref="heading" /> <p>Main text</p> </template> <script setup> import { TestHeading, set_title } from '../components/TestHeading.vue'; const heading = ref() heading.value.set_title('new title'); </script>

javascript vue.js vue-component vue-composition-api

回答 1 投票 0

如何在 vue.js 中转义大括号

我的数据库中的数据可能包含大括号{{ }}。 {{-- app.blade.php 内 --}} ...代码 {{ $数据}} 我的数据库中有数据，其中可能包含大括号{{ }}。 {{-- inside app.blade.php --}}  <div id="app"> ...code <div> {{ $data }} </div> ...code </div> 因此，如果我想向用户显示它，则该数据在 Vue 应用程序内部会导致问题。并且 vue 认为它是要执行的 javascript 代码。例如，如果 $data 等于 {{ title->links() }} 那么我会收到错误，整个应用程序根本无法编译。（它通过刀片模板）。 [Vue warn]: Error compiling template: invalid expression: expected expression, got '>' in _s(title->links()) Raw expression: {{ title->links() }} 305| <div>{{ title->links() }}</div> | ^^^^^^^^^^^^^^^^^^^^^^^ 逃避用户数据的大括号（在 Vue.js 中）的最佳方法是什么？？您需要使用 {{ }} 或 v-pre 指令：v-html 或 <div v-pre>{{ data }}</div>

laravel vue.js vuejs2 vue-component laravel-blade

回答 1 投票 0

向App的vue文件添加数据会破坏导入的组件

我是 vue 的初学者，我正在尝试将数据添加到我的 vue 应用程序文件中，但是当我添加 data() 导入的组件时，它不会呈现。我想添加链接的标签和 url 作为对象，但它只是......

vue.js vue-component

回答 1 投票 0

如何获取所有已注册的Vuex模块

有没有办法迭代所有Vuex模块？我像这样注册了我的命名空间模块： $store.registerModule('模块-xyz', 模块); 现在有什么方法可以获取所有这些的列表吗？

javascript vue.js vue-component vuex vuex-modules

回答 2 投票 0

如何通过数据绑定将对象传输到父组件 - Vue.js

在我的 Vuejs 应用程序中，我有一个 select 元素，用户可以在其中选择一个国家/地区。国家/地区元素如下所示：国家 { 编号: 1, 名称：“德国”，排序：1 } 我得到了这些 c 的列表...

javascript vue.js vuejs3 vue-component

回答 1 投票 0

如何在 vuejs 3 组件中导入项目的自定义 js 文件？

我想在vue3组件中导入自定义js文件。请帮我解决我的问题。我已经尝试过这个： &...</desc> <question vote="0"> <p>我想在vue3组件中导入自定义js文件。请帮助我解决我的问题。</p> <p>我已经尝试过这个：</p> <pre><code><template></template> <script src="filePath/file.js"></script> <script> import 'filePath/file.js'; export default{ name: 'Component Name' } </script> </code></pre> <pre><code><template></template> <script> import 'filePath/file.js'; export default{ name: 'Component Name' } </script> </code></pre> <p>有些地方我看到了这样的答案</p> <pre><code>import ClassName from "src/Filename"; </code></pre> <p>但是我的文件没有类名，没有导出默认值，这种情况我该怎么办？</p> <p>我想要这样的。</p> <pre><code><template></template> <script> import 'filePath/file.js'; export default{ name: 'Component Name' } </script> </code></pre> </question> <answer tick="false" vote="0"> <p>在 Vue 3 中，您应该使用 import 语句在组件中导入外部 JavaScript 文件。但是，必须了解，如果您要导入的文件没有导出语句或默认导出，您将无法将其直接作为命名导入导入。</p> <p>以下是在 Vue 3 组件中导入外部 JavaScript 文件的正确方法：</p> <pre><code><template>  </template> <script> // Import the entire module without a default export import * as customFile from 'filePath/file.js'; export default { name: 'ComponentName', mounted() { // Now you can use the functions, variables, or objects from the imported file customFile.someFunction(); customFile.someVariable; }, }; </script> <style> /* Your styles here */ </style> </code></pre> <p>在此示例中，import * as customFile 语法将“filePath/file.js”文件中的所有导出导入到 customFile 对象中。然后，您可以从组件中的 customFile 访问函数、变量或对象。</p> <p>下面是“filePath/file.js”文件的简单示例，其中包含一些可以导入到 Vue 3 组件中的函数、变量和对象：</p> <pre><code>// filePath/file.js // Example function function greet(name) { return `Hello, ${name}!`; } // Example variable const version = '1.0.0'; // Example object const config = { apiUrl: 'https://api.example.com', apiKey: 'your_api_key_here', }; // Export the functions, variables, and objects export { greet, version, config }; </code></pre> <p>现在，在您的 Vue 3 组件中，您可以从“filePath/file.js”导入和使用这些：</p> <pre><code><template> <div> <p>{{ customGreeting }}</p> <p>Version: {{ customVersion }}</p> <p>API URL: {{ customConfig.apiUrl }}</p> </div> </template> <script> import * as customFile from 'filePath/file.js'; export default { name: 'ComponentName', data() { return { customGreeting: '', customVersion: '', customConfig: {}, }; }, mounted() { // Use the imported functions, variables, or objects this.customGreeting = customFile.greet('Vue Developer'); this.customVersion = customFile.version; this.customConfig = customFile.config; }, }; </script> <style> /* Your styles here */ </style> </code></pre> <p>此示例展示了如何将“filePath/file.js”中的函数、变量和对象导入到 Vue 3 组件中并使用它们。根据您的具体需求进行调整。</p> </answer> </body></html>

vue.js vuejs3 vue-component

回答 0 投票 0

@手表装饰器未激活

我有一个简单的测试组件，模板如下所示： {{消息}} 我有一个简单的测试组件，模板如下所示： <template> <div> <input type="text" v-model="name" class="form-control"> <h5>{{ message }}</h5> </div> </template> <script src="./test.ts" lang="ts"></script> TypeScript 组件如下所示： declare var Vue: typeof Function; declare var VueClassComponent: any; import { Component, Inject, Model, Prop, Watch } from "vue-property-decorator"; @VueClassComponent.default({ template: require("./test.vue"), style: require("./test.sass"), props: { name: String, num: Number } }) export default class TestComponent extends Vue { name: string; num: number; message: string = ""; @Watch("name") protected onNameChanged(newName: string, oldName: string): any { console.log("setting " + oldName + " to " + newName); } mounted(this: any): void { console.log("mounted called"); this.message = "Hello " + this.name + " " + this.num; } } 当我在 input 框中输入内容时，@Watch("name") 处理程序永远不会触发，但是我确实在 console: 中收到这些错误 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name" 对于在 input 框中输入的每个字符一次。我不知道该名称在哪里设置，因为我没有在任何地方设置它。虽然这是我的目标（更新名称），但我一直在读你不能直接更改值，你需要设置 @Watch 处理程序，然后在其他地方设置它们（我仍然不明白如何但现在还无法获得。根据我们的讨论，这里问题的根源在于将 name 声明为属性。目的是 name 是一个内部值，仅用于导出 message。既然如此，手表就没有必要了，电脑就可以了。 declare var Vue: typeof Function; declare var VueClassComponent: any; import { Component, Inject, Model, Prop, Watch } from "vue-property-decorator"; @VueClassComponent.default({ template: require("./test.vue"), style: require("./test.sass"), props: { num: Number } }) export default class TestComponent extends Vue { name: string; num: number; get message(){ return "Hello " + this.name + " " + this.num; } } 这是因为 name 变量尚未初始化，因此在“this”上尚不存在。如果它被初始化为任何值，那么就会为其创建一个 proxyGetter 并且手表将会工作。

typescript vue.js vuejs2 vue-component

回答 2 投票 0

VueJS 从父组件访问子组件的数据

我正在使用 webpack 的 vue-cli 脚手架我的 Vue 组件结构/层次结构当前如下所示：应用程序 PDF模板背景动态模板图像静态模板图像马克德...

vue.js vue-component vuex

回答 6 投票 0

异步组件中异步响应数据的使用

下面是父组件和子组件：导出默认值{ name : '父节点', 安装：函数（）{ var that = this; 如果（那个。$store.state.auth.isAuthenticated）...

javascript vue.js asynchronous vue-component

回答 1 投票 0

Vue Test utils 自定义事件触发器不起作用

我正在尝试为我的父组件编写一个测试，我想在其中触发 doSomething 方法并断言该操作。父组件：我正在尝试为我的父组件编写一个测试，我想在其中触发 doSomething 方法并断言该操作。父组件： <div> <DropdownContainer v-model="selectedTitle" title="dropdown-title" :options="dropdownOption" @load-data="doSomething" dropdown-data-test="dropdown-test"/> </div> doSomething() { console.log('I am getting called'); } 子组件 <template> <Dropdown :model-value="modelValue" :options="options" :data-test="dropdownDataTest" @change="emitEvent"> </Dropdown> </template> export default { name: "DropdownContainer", emits: ['update:modelValue', 'load-data'], methods: { emitEvent(event) { this.$emit('update:modelValue', event.value); this.emitChangeEvent && this.$emit('load-data') } } } parent-component.spec.js it('should call dropdown load-data method',async () => { const wrapper = mount(Parent) const dropdown = wrapper.findComponent('[data-test="dropdown-test"]') await dropdown.trigger('load-data'); }); 现在，当我运行测试时，测试通过，因为没有断言，但我没有看到父组件doSomething控制台日志被调用。但是如果我将子组件中的 emits 声明从 emits: ['update:modelValue', 'load-data'] 更改为 emits: ['update:modelValue'] 然后我的父组件测试通过并打印控制台日志，这意味着父组件实际上调用了 doSomething 方法，我不知道为什么。我做错了什么吗，因为根据官方文档，我们应该列出所有发出的事件，但我的测试因此失败。预先感谢。注意：我使用的是 Vue3、Vue/test-utils 和 Primevue 组件库。该功能运行良好，只是测试问题。问题出在 .trigger 上。正如文档所说，它会在 DOM 节点上触发事件。如果您在 emits 块中明确指定事件，则表示您的组件将触发该事件。否则，VTU 仅触发 load-data 事件作为 DOM 节点事件。在你的情况下，你应该使用 $emit wrapper.findComponent('[data-test="dropdown-test"]').vm.$emit('load-data') await wrapper.vm.$nextTick() // Wait until $emits have been handled // then expect(wrapper.emitted('first-event'))... expect(wrapper.emitted('second-event'))...

vue.js vue-component vue-test-utils custom-events primevue

回答 1 投票 0

Nuxt 3 组件首次渲染时如何设置加载器

我正在使用 element plus 库开发 nuxt 3 项目，我的一个页面有 3 个选项卡，我已将 3 个选项卡内容分为 3 个组件，并且我设置了仅渲染第一个选项卡的条件

javascript vue.js nuxt.js vue-component nuxtjs3

回答 1 投票 0

Vue 3 - 使用全局组件“无法解析组件”

我的 Vue 组件在顶级 HTML 文件中声明时工作正常，如下所示 ... 我的 Vue 组件在顶级 HTML 文件中声明时工作正常，如下所示 <body> <div class='app' id='app'> <header-bar id='headerBar'></header-bar> <journal-page></journal-page> </div> <script src="js/app.js"></script> </body> 但是在 <journal-card> 组件内使用 <journal-page> 组件给了我错误： [Vue warn]：无法解析组件：日记卡位于<JournalPage>。请问我该如何解决这个问题？这是我加载 Vue 组件的顶级代码，app.js： import * as _vue from 'vue'; import _headerBar from './widgets/headerBar.vue'; import _journalCard from './widgets/journalCard.vue'; import _journalPage from './widgets/journalPage.vue'; import _store from './data/store.js'; const app = _vue.createApp ({ components: { 'headerBar': _headerBar, 'journalCard': _journalCard, 'journalPage': _journalPage }, data : _store, methods: {} }); const mountedApp = app.mount('#app'); 这是我的journal-page.vue容器 <template> <ul> <journal-card v-for="item in journal" :key="item.id" :entry=item></journal-card> </ul> </template> <script lang="js"> import _store from '../data/store.js'; export default { 'data': _store }; </script> 和journal-card.vue组件 <template> <div> hi imma journal entry </div> </template> <script lang="js"> export default { 'data': null, 'props': [ 'entry' ] }; </script> 在根组件的 components 选项中注册组件不会使它们成为全局组件。这样做只会使它们可供根组件本身使用，而不是其子组件。要全局注册组件，请在顶级代码中使用 app.component： main.js import { createApp } from 'vue'; import App from './App.vue'; import MyGlobalComponent from './components/MyGlobalComponent.vue'; const app = createApp(App); app.component('MyGlobalComponent', MyGlobalComponent); ✅ const mountedApp = app.mount('#app'); 另外，由于在搜索引擎中查找“Vue 3 无法解析组件”的一些问题时会显示此页面，因此 Vue 3 / Quasar 2 已弃用了一些内容：例如。 q-侧链接默默地消失了（这里是上一个文档）根据此评论： QSideLink——不再需要！只需使用 QItem 或其他东西您想要的组件并将 @click="$router.push(...)" 绑定到它。抱歉，如果它不完全符合主题，但它会咬伤其他人，所以我更愿意帮助一个人发表此评论;-) 在我的场景中，问题是不同的。我试图在 laravel Blade 文件中渲染类似的多字 Vue 组件。如果您在非 .Vue 文件（例如 HTML / Laravel Blade 等）中引用 Vue 组件，则应使用短横线格式来引用组件名称。喜欢my-global-component Vue 文档 - https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats 对我来说，它是在数组中声明组件： components: [ActiveUser, UserData] 本应位于对象中： components: {ActiveUser, UserData} 确保安装代码最后出现 app.mount('#app') app.component('list-view', ListView2) 是错误的并且不会起作用但是 app.component('list-view', ListView2) app.mount('#app') 是正确的。

javascript vue.js vue-component vue-cli vuejs3

回答 5 投票 0

Vue 不更新手表内的 modelValue

如果我不通过 props 传递 modelValue，则在 $watch 中发出 update:modelValue 事件不会更新 modelValue。如何确保 modelValue 更新而不通过 props 传递 modelValue ？我的组件：

vue.js vuejs3 vue-component vue-props

回答 1 投票 0

如何在 Vue 3 的 Composition API 的 Setup 函数中引用图像？

如何在合成 API 的设置功能中引用图像？路径是“../assets/pic.png” 如果我直接在模板内部使用路径，作为 img 标签中的 src，则图像显示...

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

回答 3 投票 0

未找到与路径匹配的位置 - Vue 3 + Vue Router 4

我需要在 Vue 应用程序中动态创建路由。我已经在此代码沙箱链接上创建了一个基本组件。我遇到的问题是，第一次加载时主页会重新显示...

vue-component vuejs3 vue-router4

回答 5 投票 0

检查组件是否附加了事件监听器

假设有一些组件。可以使用附加的 @cancel 事件侦听器来调用它，如果是这种情况，我想显示触发此事件的取消按钮。如果有的话... 假设有一些 <Form> 组件。可以使用附加的 @cancel 事件侦听器来调用它，如果是这种情况，我想显示触发此事件的取消按钮。如果没有 @cancel 事件，取消按钮应该不可见。有没有办法检查组件是否附加了事件侦听器？目前我做的是： <template> <form> <button v-if="cancelEventPassed" @click="$emit('cancel')">Cancel</button> </form> </template> 并这样称呼它： <Form :cancelEventPassed="true" @cancel="handle_cancel" /> 都可以 <Form/> 是否可以在不使用任何其他属性（如cancelEventPassed）的情况下实现这一目标？当组件附加了侦听器时，它们可以在组件的 $listeners 属性中使用。您可以使用该属性来确定特定侦听器是否可用。例如，这是一个计算属性，用于检查 cancel 侦听器是否存在。 computed:{ hasCancelListener(){ return this.$listeners && this.$listeners.cancel } } 这是在组件中使用的示例。 console.clear() Vue.component("CustomForm", { template:` <div> <h1>Custom Form</h1> <button v-if="hasCancelListener" @click="$emit('cancel')">I have a listener!</button> </div> `, computed:{ hasCancelListener(){ return this.$listeners && this.$listeners.cancel } }, }) new Vue({ el: "#app", methods:{ onCancel(){ alert('canceled') } } }) <script src="https://unpkg.com/[email protected]"></script> <div id="app"> <custom-form @cancel="onCancel"></custom-form> <hr> <custom-form></custom-form> </div> 在 Vue 3 中，$listeners 对象已被删除。侦听器现在是 $attrs 对象的一部分，并且带有 on 前缀。为了检查子组件中是否存在特定侦听器，您可以执行以下操作： computed: { hasCancelListener() : boolean { return (this.$attrs && this.$attrs.onCancel) as boolean } } 子组件称为： <custom-form @cancel="onCancel"></custom-form> 因为 @prerak-sola 的解决方案不起作用，如果您像这样定义发射（如所示）亚当·里斯）： const emit = defineEmits<{ (e: 'click', v: MouseEvent): void; (e: 'update:modelValue', v: MouseEvent): void; }>(); 我发现，由于 vue 将所有 props 转换为对象，并且只是在每个事件名称之前添加前缀 on，因此您只需检查该属性（事件侦听器）是否在 vnode 中定义： const hasClickEventListener = computed(() => !!getCurrentInstance()?.vnode.props?.onClick); const hasModelValueUpdateListener = computed(() => !!getCurrentInstance()?.vnode.props?.['onUpdate:modelValue']); 但是，我在官方文档中找不到任何有关此内容的信息（并且它比使用useAttrs困难得多）。所以请谨慎使用。此示例适用于 Vue 3 this.$attrs.onCancel 说明 Vue 3 删除了 $listeners 对象，而是侦听器将与带有 $attrs 前缀的 on.. 对象分开。参考 https://v3-migration.vuejs.org/writing-changes/listeners-removed.html#overview 您可以这样检查监听器是否存在： this._events['listener-name'] 如果您在这里寻找 Vue 3 script setup 或 setup function 解决方案，您可以检查 attrs 函数中的 getCurrentInstance 键 <template> <form> <button @click="$emit('cancel')">Cancel</button> </form> </template> <custom-form @cancel="onCancel"></custom-form> onMounted(() => { const instance = getCurrentInstance() // only available inside lifecycle hooks console.log(instance?.attrs?.onCancel) }) Vue 2.7 脚本设置示例 import {useListeners, computed} from 'vue'; const listeners = useListeners(); const hasCancelListener= computed(() => { return typeof listeners['cancel'] !== 'undefined'; }); 在 Vue 3 中 const thisInstance = getCurrentInstance(); const hasTaskClickedListener = computed(() => { if (!thisInstance) return null; return thisInstance.attrs?.onClicked; }); 说明： this 与 vue 3 中的 getCurrentInstance() 相同 listeners 对象通过前缀为“on”的属性进行更改，如 onClick、onDelete 等将 getCurrentInstance() 始终放在设置脚本上，除非你总是为 null（vue 无法看到其实例时的值）

javascript vue.js vuejs2 vue-component

回答 8 投票 0

Vue 3 相当于 Vue.extend()

我正在尝试从 vue2 迁移到 vue3 下一段代码： Vue2 到 vue3 选项 api 3party纯js库中使用的其他函数的回调中的代码 const cls = Vue.extend(extendComponent);

vue.js vuejs3 vue-component

回答 1 投票 0

您好，我正在尝试使用 vue.js 中的已安装函数，但它不起作用

当以下网址加载时，我尝试自动获取所有产品 '/管理员/产品管理员' 但安装的功能不起作用，当 url 加载时它不会加载任何内容以下...

vue.js vue-component vuetify.js vue-composition-api

回答 1 投票 0

如何在 Vue 3 中将动态属性从父组件同步到子组件

我有一些产品，我想使用复选框根据其类别进行过滤。为此，我有一个父组件，它将可能的类别（例如 A、B 和 C）传递给子组件并保留