vue-component 相关问题

Vue 从 ref 获取数据

我正在探索 VUE 并尝试使用 fetch 从外部 API 获取帖子。但是，当尝试从 ref 获取值时，它显示为空。 这是我到目前为止所做的。 <question vote="0"> <p>我正在探索 VUE 并尝试使用 fetch 从外部 API 获取帖子。但是在尝试从 ref 获取值时，它显示为空。</p> <p>这是我到目前为止所做的。</p> <pre><code>&lt;script setup&gt; import {onMounted, ref } from &#39;vue&#39;; const Posts = ref([]); onMounted( async () =&gt; { const Url = &#39;https://jsonplaceholder.typicode.com/posts&#39;; try { const response = await fetch(Url); if (!response.ok) { throw new Error(`Response status: ${response.status}`); } Posts.value = await response.json(); } catch(e) { console.log(`Error: ${e}`) } }) console.log(Posts) &lt;/script&gt; &lt;template&gt;&lt;/template&gt; </code></pre> <p>尝试安慰帖子时，它显示为空。 我想将 Post 的值传递给另一个组件。但因为这里显示为空。我一无所知。</p> </question> <answer tick="false" vote="0"> <p>看这个：<a href="https://vuejs.org/tutorial/#step-12" rel="nofollow noreferrer">https://vuejs.org/tutorial/#step-12</a> 然后点击“告诉我”按钮</p> </answer> </body></html>

如何动态地将类应用到子组件？

我在父组件中有一个子组件。每当单击子组件时，我都需要对其应用一个名为 .selected 的类。 家长.vue 我在父组件中有一个子组件。每当单击子组件时，我都需要对其应用一个名为 .selected 的类。 Parent.vue <template> <ol> <li v-for="(Contact, index) in Contacts"> <Component-Contact :ref="(el) => { RefContacts[index] = el}" @click="onClick(RefContacts[index])" :Contact="Contact" @Selected="(Data) => onSelected(Data)"/> </li> </ol> </template> <script> import ComponentContact from '../components/Contact.vue' .... setup() { const RefContacts = ref([]); function onSelected(Contact){ //Adds data received from child component to an array } onClick(el) { el.toggleClass('selected') // Returns error saying toggleClass is not a function!! } return { Contacts, // An array of contacts from the DB onSelected } } </script> 子组件Contact.vue <template> <div style="cursor: pointer" @click="onClick($el, Contact)"> <p>{{Contact.Forename}}</p> <p>{{Contact.Surname}}</p> </div> </template> <script> ... props: { Contact: { type: Object, required: true }, emits: 'Selected', setup() { function onClick(el, Contact) { el.toggleClass('selected') // This works but I don't want to set it here in the child return context.emit('Selected', { FullName: Contact.forename + ' ' + Contact.surname } } } </script> 如何让 Vue 将 .selected 类应用到 <Child-Component /> 视图中的 Parent.vue？我想将它设置在父组件中（或使用它的其他地方），然后在用户完成他正在做的事情时删除该类。我觉得这比在子组件中设置它更灵活。 首先，您不应该自己在 DOM 元素上应用该类。 使用:class="{ selected: /* condition here */ }" 一个基本示例，其中只能选择一个项目（选择另一个项目将取消选择前一个项目）： const { createApp, ref } = Vue const app = createApp({ setup() { const selected = ref(null) return { selected, select: (index) => (selected.value = selected.value === index ? null : index) } } }).mount('#app') li { cursor: pointer; } .selected { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.prod.min.js"></script> <div id="app"> <ul> <li v-for="(_, index) in 6" @click="select(index)" :class="{ selected: index === selected }" v-text="'item'" /> </ul> </div> 您可以在此处单独选择项目： const { createApp, ref } = Vue const app = createApp({ setup() { const items = ref( Array.from({ length: 7 }).map(() => ({ selected: false })) ) return { items, toggle: (index) => items.value.splice(index, 1, { selected: !items.value[index].selected }) } } }).mount('#app') li { cursor: pointer; } .selected { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.prod.min.js"></script> <div id="app"> <ul> <li v-for="({ selected }, index) in items" @click="toggle(index)" :class="{ selected }" v-text="'item'" /> </ul> </div>

错误：请求的模块“vue”未提供名为“default”的导出

观看价值：{{ WatchValue }} ... <template> <div id="app"> <p>Watched Value: {{ watchedValue }}</p> <input v-model="inputValue" placeholder="Enter a value" /> </div> </template> <script> import Vue from 'vue'; const app = new Vue({ el: '#app', data() { return { inputValue: '', watchedValue: '' }; }, watch: { inputValue(newValue) { this.watchedValue = `You entered: ${newValue}`; } } }); </script> 在 setup 函数中，我们创建一个具有 inputValue 和 WatchdValue 属性的响应式对象状态。 我们使用 watch 函数来监视 inputValue 的变化。每当 inputValue 发生变化时，就会触发回调函数。在本例中，我们通过将您输入的字符串指定为 ${newValue} 来更新 WatchedValue 以包含输入的值。 在模板中，我们使用Vue的数据绑定语法（{{variable}}）显示watchedValue，并使用v-model将输入字段绑定到inputValue。 当用户在输入字段中键入内容时，inputValue 会进行反应式更新，从而触发手表效果。然后，watchedValue 会更新以显示输入的值，前缀为“您输入：”。 先看一下这个问题： Vue“导出默认值”与“新 Vue” 我认为你尝试导入你的“组件”，所以你需要提供： export default { components: { myComponent } data () { return {} } ... } 您的语法适用于根组件，不能像那样使用 <my-component></my-component> 在父组件中 要解决此问题，请确保导出您的操作，如下所示 // Import Axios instance with base configuration // Vuex module for authentication and permissions const state = { // }; const mutations = { // }; // Individual actions exported as named exports export async function registerUser(_, { name, email, password, password_confirmation }) { // } // Export the module as a default export export default { namespaced: true, state, mutations, getters, };

如何等待 prop 更改作为函数的一部分？

我有一个 Form.vue 组件，在其他父组件中使用该组件将用户的数据提交到服务器。 Form.vue 有一个 prop 来指示其父组件是否传递了自己的

如何深度定制一个element-plus组件？

我正在尝试以库 element-plus 作为基础构建自己的组件。 到目前为止，当涉及到颜色等简单的东西时，我取得了巨大的成功，可以轻松地转发德...

设置选项选择菜单的默认值

我想将自定义属性绑定到选项选择菜单。 标签仅具有 selected="selected" 属性 < 我想将自定义属性绑定到选项选择菜单。 <option> 标签仅具有 selected="selected" 属性 <template> <div> <select> <option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option> </select> </div> </template> data: { selected: "selected", notSelected: "" } 这不起作用，但如果我将 v-bind:selected 更改为 v-bind:class 那么它会收到适当的类，因此逻辑正在工作，但不适用于 selected 属性。 有什么方法可以使其与此类自定义属性一起使用吗？ 您可以使用 v-model 在选择框中选择默认值： 标记： <div id="app"> <select v-model="selected"> <option value="foo">foo</option> <option value="bar">Bar</option> <option value="baz">Baz</option> </select> </div> 查看型号： new Vue({ el: "#app", data: { selected: 'bar' } }); 这是 JSFiddle：https://jsfiddle.net/Lxfxyqmf/ html: <div id="myComponent"> <select v-model="selectedValue"> <option v-for="listValue in valuesList" :value="listValue"> {{listValue}} </option> </select> <span>Chosen item: {{ selectedValue }}</span> </div> js: var app = new Vue({ el: '#myComponent', data: { selectedValue: 'Two', valuesList: ['One', 'Two', 'Three'] }, 我创建了一个可重用的 select 组件，它也将 modelValue 发送到父组件。 如果您查看第一个选项标签，您可以看到我如何使用 props 创建默认值。 BaseSelect.vue（子组件） <template> <label v-if="label">{{ label }}</label> <select class="field" :value="modelValue" v-bind="{ ...$attrs, onChange: ($event) => { $emit('update:modelValue', $event.target.value); }, }" > <option value="" disabled>{{ defaultValue }}</option> <option v-for="option in options" :key="option" :value="option" :selected="option === modelValue" > {{ option }} </option> </select> </template> <script> export default { props: { label: { type: String, default: "" }, defaultValue: { type: String, default: "Select an item of the list", required: false }, modelValue: { type: [String, Number], default: "Otros" }, options: { type: Array, required: true }, }, }; </script> 父组件 <BaseSelect label="Asunto" defaultValue = "Selecciona un asunto" v-model="contactValues.asunto" :options="asuntos" /> 请注意，您必须在 data() (v-model) 中正确接收此值 使用新的组合 API： <template> <select v-model="selectValue"> <option value="a"> Option a </option> <option value="b"> Option b </option> </select> </template> <script> import { ref } from 'vue'; export default { setup() { // Create a reactive value for our select const selectValue = ref('a'); // Return to the template return { selectValue }; }, }; </script> 所以我不确定这个问题是否已经解决，但我只是想在这里添加另一个选项。 <select v-model="selectedOffice" class="select-style"> <option v-for="(office_id) in OID" :key="office_id"> {{ office_id.office_name }} </option> </select> JS： if (this.OID.length < 2) { this.selectedOffice = this.OID[0].office_name; this.officeID = this.OID[0].office_id; } 因此在这种情况下，如果数组中只有一个选项，我将 v-model 变量设置为数组中的第一个选项。如果有更多选择，概念是相同的。

如何在VueJs中动态添加属性

我正在使用vuejs，我想知道如何控制输入（必要时添加禁用属性）。有没有办法在vuejs中动态添加属性？在我的 Textfield 组件下面： ...

Vue JS 和 Tailwind CSS 中推动侧边栏的按钮

我正在编写一个侧边栏，当分辨率很小时，侧边栏就会消失，如果我单击一个按钮，我的侧边栏就会从屏幕上返回，但我的代码只推送一个白色的div。这是我的代码： 我正在编写一个侧边栏，当分辨率较小时，侧边栏就会消失，如果我单击一个按钮，我的侧边栏就会从屏幕上返回，但我的代码只推送一个白色的 div。这是我的代码： <div class="w-64 space-y-6 border-r px-2 py-4 inset-y-0 left-0 border-gray-100 absolute md:relative md:-translate-x-0 transform -translate-x-full transition duration-200 ease-in-out dark:bg-vd1 dark:border-gray-800 dark:border-opacity-90" :class="{ 'relative -translate-x-0': showSidebar }"> <div class="py-4 px-6"> <div class="mb-4 mx-auto w-full max-w-sm fixed top-4 left-6 inline-block"> <div class="justify-between inline-flex w-full"> <div> <a href="" class="inline-flex" > <img src="../Assets/Img/logo.svg" class="h-9 w-9 pt-1" alt="" /> <p class="font-semibold text-xl pl-4 pt-2 text-indigo-500 text-opacity-90">Vuexy</p> </a> </div> <div> <BreezeCheckbox2 name="sidebar" class="mr-11 mt-3 w-5 h-5 rounded-full" checked/> </div> </div> </div> </div> <div class="flex justify-center"> <BreezeButton class="inline-flex items-center w-56 h-11 bg-gradient-to-r from-indigo-500 to-purple-500 text-white text-sm hover:bg-purple-600 shadow-purple mt-1 normal-case"> <img src="../Assets/Icons/shield.svg" alt="" class="mr-2 w-5 h-5"> <span v-if="selectedLang==='English'" class="font-normal">Access Control</span> <span v-if="selectedLang==='French'" class="font-normal">Contrôle d'accès</span> <span v-if="selectedLang==='German'" class="font-normal">Zugangskontrolle</span> <span v-if="selectedLang==='Portuguese'" class="font-normal">Controle de acesso</span> </BreezeButton> </div> </div> <button @click="showSidebar = !showSidebar" class="lg:hidden md:hidden ml-5 dark:text-gray-300"> ------------------- <script> export default { setup(){ const showSidebar = ref(false) const stayInDropdown = ref(true) const isDark = ref(false) return{ showSidebar, stayInDropdown, isDark, } }, </script> 为了更好地查看，这里有一些图片： 所以你需要显示一个侧边栏： 小屏幕上默认隐藏 默认在中及以上屏幕上可见 用户应该能够在小屏幕上切换侧边栏可见性 Check below example Run the code snippet Open in full screen Play with screen size and toggle sidebar visibility new Vue({ el: '#app', data() { return { showSidebar: false } }, methods: { toggleSidebar() { this.showSidebar = !this.showSidebar } } }) span.icon.menu>div { width: 35px; height: 5px; background-color: black; margin: 6px 0; } <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" class="container h-screen w-screen flex bg-blue-100"> <div class="sidebar p-4 rounded-xl bg-white border border-gray-400" :class="{'block':showSidebar,'hidden md:block':!showSidebar}">Sidebar</div> <div class="sidecontent flex-grow p-4 bg-gray-100"> <div @click="toggleSidebar" class="navbar flex p-4 rounded-xl bg-white"> <span class="icon menu mr-4"> <div></div> <div></div> <div></div> </span> <span>Navigation</span> </div> <div class="content p-4 ">Content</div> </div> </div> new Vue({ el: '#app', data() { return { showSidebar: false } }, methods: { toggleSidebar() { this.showSidebar = !this.showSidebar } } }) span.icon.menu>div { width: 35px; height: 5px; background-color: black; margin: 6px 0; } <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" class="container h-screen w-screen flex bg-blue-100"> <div class="sidebar p-4 rounded-xl bg-white border border-gray-400" :class="{'block':showSidebar,'hidden md:block':!showSidebar}">Sidebar</div> <div class="sidecontent flex-grow p-4 bg-gray-100"> <div @click="toggleSidebar" class="navbar flex p-4 rounded-xl bg-white"> <span class="icon menu mr-4"> <div></div> <div></div> <div></div> </span> <span>Navigation</span> </div> <div class="content p-4 ">Content</div> </div> </div>

如何将数据设置到nuxt.js nuxt-link中？

我正在尝试将数据传递到 nuxt-link，但当我单击链接时，nuxt-link 仅返回 404 错误。它似乎没有获取和加载文件...... 第二个使用 :href...

有什么方法可以“监视”Vuejs 中的本地存储吗？

我正在尝试监视本地存储： 模板： 令牌 - {{令牌}} 脚本： 计算：{ 令牌（）{ return localStorage.getItem('token'); } } 但它并没有改变...

Vue 3 类型声明文档

在哪里可以找到 Vue 3 类型（例如 HTMLAttributes 或 Component）的文档，甚至使用搜索也一直在文档中查找。 阅读它们的唯一方法就是去运行......

Vuejs 组件扩展在 webpack 生产模式下无法工作

我制作了一个 componentChild 扩展了 componentParent。 它在 https://vuejs.org/api/options-composition#extends 中描述 // 组件Parent.vue 组件父级 我制作了一个 componentChild 扩展了 componentParent。 它在https://vuejs.org/api/options-composition#extends中进行了描述 // componentParent.vue <template> <div>componentParent</div> </template> <script setup> defineOptions({ name: 'componentParent' }) defineProps({...}) defineEmits({...}) </script> // componentChild.vue <script> import componentParent from './componentParent.vue'; export default { name: 'componentChild', extends: componentParent, setup(props, ctx) { return { ...componentParent.setup(props, ctx) } } } </script> 在“webpack开发”模式下，ComponentChild被渲染 但是，在“webpack生产”模式下，componentChild不会被渲染。在 html 中没有 dom。 （如果将 componentParent 作为选项 api，一切都可以） 如何在 webpack 生产模式下渲染 componentChild？ 我以前遇到过这个问题，我希望以下解决方案之一能够帮助您解决它： webpack 中某些特定于生产的优化可能会导致某些组件无法渲染。您可以检查和调整 optimization.minimize 和 tree shaking 等设置，以防止意外删除代码。 不要在 componentParent 中使用 Composition API，而是尝试使用 Option API 来实现它，或者找到另一种方法将 props 和 emits 传递给 componentChild。 有趣的是，我的问题是使用第二种方法解决的。 componentParent.vue <template> <div>componentParent</div> </template> <script> export default { name: 'componentParent', props: {...}, emits: {...} }; </script> 您不需要更改componentChild.vue，因为它仍然使用extends，并且会自动继承componentParent。

传递给组件的函数 prop 在 Vue3 中未定义

我遇到了一个问题，我希望子组件调用作为父组件提供给它的函数。我之前用其他组件做过，但用这个它就不起作用。 这里有...

如何在vue js html中根据时间显示“已关闭”或“打开”？

这是我的json数据，用于显示商店的营业时间： { “状态”：真实， “数据”： { “pid”：1， “企业名称”：“ard”...

如何在 Nuxt 的子文件夹中注册组件？

我的文件夹结构如下所示： /成分 /节 /图像网格 ImageGrid.vue /联系部分 ContactSection.vue 在 Vue 文件中，我使用以下命令注册组件...

如何将按钮与v卡标题放在同一行？

我的 v 卡上有标题、子标题、图标和按钮。我的目标是将创建按钮放在右侧，但我似乎无法做到这一点。 ... 我的 v 卡上有标题、子标题、图标和按钮。我的目标是将创建按钮放在右侧，但我似乎无法做到这一点。 <template> <v-row class="pl-5"> <v-card class="pl-5" elevation="0"> <v-card-title> <v-icon left x-large color="primary">{{ icon }}</v-icon> <span class="font-weight-bold">{{ title }}</span> </v-card-title> <v-card-subtitle> Subheader </v-card-subtitle> <v-spacer></v-spacer> <router-link v-if="type == 'index'" :to="`/${name.toLowerCase().replace(' ', '-')}/create`"> <v-btn outlined class="blue--text mt-5 mr-8"> <span>Create</span> </v-btn> </router-link> </v-card> </v-row> </template> <script> export default { props: { icon: String, name: String, title: String, subtitle: String, type: String }, components: {} } </script> <style scoped></style> 如果我将 <router-link> 移至 <v-card-subtitle> 我明白了 如果我将 <router-link> 移至 <v-card-title> 我明白了 有人可以帮我推一下吗？ 小提琴 https://jsfiddle.net/bheng/h2u870dv/ 如果我这样做： <v-row class="pl-5"> <v-card-title> <span class="material-icons"> favorite_border </span> <p class="font-weight-bold">TITLE</p> <p class="caption">ST</p> </v-card-title> <v-spacer></v-spacer> <v-btn>Create</v-btn> </v-row> 我明白了 按钮似乎位于我想要的位置，但标题和副标题严重错位。我现在被困住了。 您可以在 v-row 中添加 div 或 v-col 并使用 css 按照您想要的方式对齐项目： new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { icon: 'favorite_border', name: 'link', title: 'TITLE', subtitle: 'https://fonts.google.com/icons?selected=Material+Icons', type: 'index' } } }) .myclass { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <v-row class="pl-5"> <div class="myclass"> <v-card class="pl-5 mycard" elevation="0"> <v-card-title> <v-icon left x-large color="primary">{{ icon }}</v-icon> <span class="font-weight-bold">{{ title }}</span> </v-card-title> <v-card-subtitle> Subheader </v-card-subtitle> <v-spacer></v-spacer> </v-card> <a v-if="type == 'index'" :href="`/${name.toLowerCase().replace(' ', '-')}/create`"> <v-btn outlined class="blue--text mt-5 mr-8"> <span>Create</span> </v-btn> </a> </div> </v-row> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script> 您的问题是您将按钮放置在您声明设置标题样式的v-card内。由于您没有指定任何宽度，因此这张卡只是一个方形盒子。如果你设置海拔=“1”，你可以清楚地看到这一点。 只需将按钮放在 v 卡外部，v-spacer 即可工作。或者，您也可以将 v-card 宽度设置为 100%。顺便说一句，您还可以在 to 中使用 v-btn 属性，因此不需要 v-router-link。 检查我制作的这个codesandbox：https://codesandbox.io/s/stack-71444864-v-spacer-example-0tx24n?file=/src/components/Example.vue <v-row class="pl-5"> <v-card class="pl-5" elevation="0"> <v-card-title> <v-icon left x-large color="primary"> mdi-home </v-icon> <span class="font-weight-bold">Testing</span> </v-card-title> <v-card-subtitle class="pb-0"> Subheader </v-card-subtitle> </v-card> <v-spacer></v-spacer> <v-btn to="/about" outlined class="blue--text mt-5 mr-8"> <span>Create</span> </v-btn> </v-row> 更新：v-cols 和带有断点条件的自定义 CSS 我看到您有兴趣学习如何使用 vuetify 的网格 进行此设计。使用 v-cols 和断点条件的优点是，您可以更好地控制不同视口的设计。就像在移动视图上一样。我就是这样做的。 我首先将网格分成两列，一列用于标题，一列用于按钮，在 cols 视图（以前称为 xs（超小））中，我将它们的大小设置为 12 列，然后在 sm（小）及以上，我将大小设置为每列 6 列。这样它们就显示为一半。 标题列没有变化，在按钮列上，我使用类 d-flex justify-end 将按钮全部移至右侧，并使用 align-center 将按钮垂直居中于 v-row 的中间。 然后，我使用断点条件来激活按钮的 block 属性，并将填充应用于整个 v 行，具体取决于当前视口。 <v-row :class="$vuetify.breakpoint.smAndUp ? 'px-4' : ''"> <v-col cols="12" sm="6"> <v-card elevation="0"> <v-card-title> <v-icon left x-large color="primary"> mdi-home </v-icon> <span class="font-weight-bold">Testing</span> </v-card-title> <v-card-subtitle class="pb-0"> Subheader </v-card-subtitle> </v-card> </v-col> <v-col cols="12" sm="6" class="d-flex justify-end align-center"> <v-btn to="/about" :block="$vuetify.breakpoint.xsOnly ? true : false" outlined class="blue--text"> <span>Create</span> </v-btn> </v-col> </v-row> 您正在使用 Vuetify 对吗？然后更简单，只需在 v-card-title 标签中添加带有绝对右上属性的按钮即可。然后 v-btn 还允许 :to (https://v2.vuetifyjs.com/en/api/v-btn/#props) <v-card-title> <v-icon left x-large color="primary">{{ icon }}</v-icon> <span class="font-weight-bold">{{ title }}</span> <v-btn outlined absolute right top v-if="type === 'index'" class="blue--text mt-5 mr-8" :to="name.toLowerCase().replace(' ', '-') + '/create'"> </v-btn> </v-card-title> <v-card-title class="d-flex justify-space-between"> <v-icon left x-large color="primary">{{ icon }}</v-icon> {{ title }} <span><v-btn outlined class="blue--text mt-5 mr-8"> Create </v-btn></span> </v-card-title>

使用vue数据变化时d3图表自动更新

我希望每次我的模拟更改并传递到数据时，条形图都可以重新渲染或更新。我在条形图组件中查看了 dataa，但它不起作用。 “console.log('这个', this.dataa);”永远不会触发...

在 Vue-3 中使用布局

我正在尝试在 vue-3 应用程序中实现布局。 基于这个解决方案，我创建了一个简单的布局文件： AppLayoutDashboard.vue： 我正在尝试在 vue-3 应用程序中实现布局。 基于这个解决方案，我创建了一个简单的布局文件： AppLayoutDashboard.vue： <template> <div style="border: 2px solid red"> <h1>AppLayoutDashboard.vue</h1> <slot/> </div> </template> 为了在某些视图中使用它，我： HomeView.vue： <template> <app-layout-dashboard> <!-- VIEW CODE HERE --> </app-layout-dashboard> </template> 我想让它更灵活，并将其移至App.vue。如果我直接将 <app-layout-dashboard> 标签移动到此文件，一切都会正常工作。 但是，我希望它能够动态加载。为了做到这一点，我想向路由数组添加一个新属性： const routes = [ { path: '/', name: 'home', component: HomeView, meta:{ layout: 'AppLayoutDashboard', } }, 我尝试使用<component :is="layout">（我从路由中检索layout），但它不起作用。 有什么建议吗？ 我遇到了与您所描述的类似的问题，我发现这篇文章非常有用。 您不需要直接在每个页面或视图上插入布局。相反，创建一个容器布局： // src/layouts/AppContainerLayout.vue <template> <component :is="this.$route.meta.layoutComponent"> <slot /> </component> </template> <script> export default { name: "AppContainerLayout" } </script> 然后，更新您的 App.vue 文件以包含容器布局： // src/App.vue <script setup> import AppContainerLayout from './layouts/AppContainerLayout.vue'; </script> <template> <AppContainerLayout> <RouterView /> </AppContainerLayout> </template> 接下来，您可以按照您所描述的方式设置路由器，但现在您可以添加对中间件的调用以加载先前与所选路由关联的布局： // src/router/router.js import { createRouter, createWebHistory } from "vue-router"; import { loadLayoutMiddleware } from "./middleware/loadLayoutMiddleware"; import HomeView from "../views/HomeView.vue"; import AnotherView from "../views/AnotherView.vue"; import NotFoundView from "../views/NotFoundView.vue"; const routes = [ { path: "/", name: "Home", component: HomeView, meta: { layout: "AppLayoutDashboard", }, }, { path: "/another_view", name: "Another", component: AnotherView, }, { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFoundView, meta: { layout: "AppLayoutError", }, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); router.beforeEach(loadLayoutMiddleware); export default router; 这是我在同一篇文章的存储库中找到的与路由器关联的布局中间件，并进行了较小的更新，以在路由中未声明布局时加载默认布局： // src/router/middleware/loadLayoutMiddleware.js export async function loadLayoutMiddleware(route) { try { let layout = route.meta.layout || "DefaultLayout"; let layoutComponent = await import(`@/layouts/${layout}.vue`); route.meta.layoutComponent = layoutComponent.default; } catch (e) { console.error("Error occurred in processing of layouts: ", e); console.log("Mounted DefaultLayout"); let layout = "DefaultLayout"; let layoutComponent = await import(`@/layouts/${layout}.vue`); route.meta.layoutComponent = layoutComponent.default; } } 检查运行正常后即可取出日志。 请记住清除视图中对布局的任何引用 // src/views/HomeView.vue: <template> <!-- VIEW CODE HERE --> </template> 最后，此时唯一缺少的是创建自定义布局，但您已经涵盖了： // src/layouts/AppLayoutDashboard.vue <template> <div style="border: 2px solid red"> <h1>AppLayoutDashboard.vue</h1> <slot/> </div> </template> // src/layouts/DefaultLayout.vue <template> <div style="border: 2px solid red"> <h1>DefaultLayout.vue</h1> <slot/> </div> </template> // src/layouts/AppLayoutError.vue <template> <div style="border: 2px solid red"> <h1>AppLayoutError.vue</h1> <slot/> </div> </template>

从父组件调用子组件方法

我想在父组件中触发事件时调用子组件中的方法，我已经做了研究，这似乎是在脚本设置中执行此操作的共识方法： // 父组件 <

Vue 3 将 Quill 编辑器 Delta 对象的输出转换为 Html 并显示 Html

我正在设计一个应用程序，用户可以使用富文本编辑器进行评论，并且这些评论会显示为 html 对象。 这是获取评论的代码： 我正在设计一个应用程序，用户可以使用富文本编辑器进行评论，并且这些评论会显示为 html 对象。 这是接受评论的代码： <quill-editor theme="snow" v-model:content="newComment"></quill-editor> 地点： const newComment = ref('') 现在假设我想显示评论（同时考虑输入的所有功能，例如项目符号点或粗体文本），我有这个元素 <div v-html="newComment"></div> 但是这个div的输出是[object Object]，不是我预期的。或者，如果我写 <div>{{newComment}}</div> 我只会得到一个像 { "ops": [ { "insert": "aaa\n" } ] } 这样的 Delta 对象。 我阅读了文档和类似的代码。有一些现有代码，但我找不到 Vue 3 组合 API 案例。 您必须指定内容类型。 <quill-editor theme="snow" v-model:content="newComment" content-type="html"></quill-editor> 它会起作用的