vue-component 相关问题

Vue + Astro：astro 页面是否可以从 vue 组件的作用域插槽中获取数据？

Vue 允许子组件通过以下方式使用作用域槽将数据传递给父组件： //子.vue 默认消息 Vue 允许子组件通过这种方式使用作用域槽将数据传递给父组件： //child.vue <template> <slot :msg="'pass me up!'">default message</slot> </template> //parent.vue <template> <Child v-slot="{ msg }">{{ msg }}</Child> </template> astro 有自己的版本： --- //Child.astro const html = await Astro.slots.render('default', [Astro.props.msg.toUpperCase()]); --- <Fragment set:html={html} /> --- //Parent.astro --- <Child>{ msg => <span>{msg}</span> }</Child> 有没有办法让 Astro 访问 vue 作用域插槽？就像下面这样？ （顺便说一句，这不起作用） //child.vue <template> <slot :msg="'message from vue!'"></slot> </template> --- //Parent.astro --- <Child> { t => <span>{t}</span> } </Child> 请忽略这些示例中忽略导入和其他样板的事实 更新 我找到了一个解决方法（但自然，它并不理想） //child.vue <template> <template v-if="renderer"> <span v-slot="renderer('message from vue!')"></span> </template> <template v-else> <slot v-else :msg="'message from vue!'"></slot> </template> </template> --- //Parent.astro --- <Child renderer={ (t : string) => `<span>${t}</span>` }></Child> 我在这里写下这个并不是作为答案，因为我相信应该有一个更好的正确答案，比我的更好 由于我找不到任何其他答案，这是我最好的尝试： //child.vue <template> <template v-if="renderer"> <span v-html="renderer('message from vue!')"></span> </template> <template v-else> <slot v-else :msg="'message from vue!'"></slot> </template> </template> --- //Parent.astro --- <Child renderer={ (t : string) => `<span>${t}</span>` }/>

vue 3.3 泛型和条件属性

我正在探索 vue 3.3 上的泛型功能 我有一个想法，即根据另一个 prop 值的值来定义传入 prop 的类型。 这是我的实际组件： 导出接口

方法indexOf()在vue 3中不起作用，也像其他方法一样

我需要通过 props 将数组索引传递给子组件，但我无法更改 data 属性的值，当我单击按钮时我会更改该值，因为这些方法不起作用。当我

Vue.js - 将自定义指令导入为 ES6 模块

我有一个相当具体的问题。 我通过rails webpacker在我的rails应用程序中使用vue，要使用vue组件，我必须在我的布局中放置一个javascript包标签并引用javas...

更改选择时的 v-select 样式

我正在使用 Vuetify 库，一旦用户做出选择，我试图覆盖 v-select 的属性，即更改边框的颜色、文本的颜色和向下图标的颜色。

我可以将 Vue 3 中的 watch 与基元一起使用吗？

每次获取数据时，我都想更改布尔值来渲染组件。 我不希望我的条件依赖于数组长度。所以我决定这样做。 还有 每次获取数据时，我都想更改布尔值来渲染 <Loading /> 组件。 我不希望我的条件依赖于数组长度。所以我决定这样做。 并且 <Loading /> 组件永远不会对 state.isLoading 变化做出反应。 我尝试使用 this.isLoading 来测试 watch 是否发生变化。但watch从未记录过任何内容。 我从未见过有人使用带有基元的手表。 问题是我不知道是否可以将 watch 与原语一起使用，以及我可以使用什么来代替，就像 React 中的 useEffect 一样。 应用程序.vue <script setup> import { RouterView } from 'vue-router' import { watch, ref, onMounted, reactive } from 'vue'; import Navbar from './components/Navbar.vue' import { useShopStore } from './stores/shopStore'; const shop = useShopStore() const bool = ref(shop.isLoading) console.log(bool) watch(bool.value, (newBool) => { console.log(newBool) }, { deep: true }) </script> 类别.vue <template> <LoadingVue v-if="shop.isLoading" /> <div v-else class="category__menu"> <CardVue v-for="item in shop.category" :item="item" :key="item.id" /> </div> </template> ShopStore.js actions: { async getProducts(path) { if (typeof path !== 'string' || path === undefined) return this.setLoading() try { const response = fetch(`https://fakestoreapi.com/products/category/${path}`) .then(res => res.json()) .then(res => this.category = res) } catch (error) { console.log(error) alert('Something went wrong') } this.setLoading() }, setLoading() { console.log('setLoading') this.isLoading = !this.isLoading } } 您正在根据反应数据创建新的引用。这就像按值复制一样，原始反应数据和包裹在其上的新引用没有连接。因此，当 shop.isLoading 发生变化时，您的 bool 参考不会变化，它们现在是两个不同的变量。 我猜你在商店中使用 pinia。如果是这样，则 shop.isLoading 已经是响应式的，您不必将其包装到 ref 中。 <Loading v-model="shop.isLoading" /> 您还可以使用 pinia 的 storeToRefs 辅助方法对您的商店使用解构并获取您的状态的参考： const { isLoading } = storeToRefs(shop) console.log(isLoading.value) 所以。 问题是我使用了 async 但我没有在函数内部使用 await，这就是条件如此工作的原因。或者没有按照我的预期工作。 现在我修好了它，我想公开承认我是个十足的白痴。 感谢您的关注。 附： 还是没弄清楚怎么用watch。唯一的方法是观察整个状态对象。 watch 仅对 state.bool 值变化做出反应。 要查看具有原始类型的变量，您可以执行如下操作 let simpleBoolean = false; watch( () => simpleBoolean, () => console.log('simple boolean changed!', simpleBoolean) );

尝试将 HTML5 日期输入与日期模型连接起来

我有一个像这样的 HTML5 日期输入元素： 如果您在此输入中选择日期，则该值将是一个字符串，例如： "2018-12-31" 在我的模型中，我想要日期...

vue 中两个组件之间传递数据

我开始学习vue，我想在组件之间传递数据到另一个组件而不使用参数/查询方式并在URL中公开数据， 我在网上发现一篇文章建议传递数据...

如何在 Vuejs 中的两个不同组件中使用 ref

我有两个组件（标题和输入组件），它们应该具有相同的标题引用，当一个组件更改时，另一个组件也应该更改。我尝试了我从这个回复中所理解的内容

Vue.js：如何将数组转换为对象？

在 Vue.js 中：如何将数组转换为对象？我只想从数组中获取名称值“Willy”。 来自 LocalStorage 的数组数据： [{“id”：“56b5”，“姓名”...

FileContentResult 返回 excel 文件损坏

我正在尝试从 ftp 下载 xlsx 文件，但当我下载并尝试打开它时，我发现它是一个损坏的文件。 。我分享后面和前面的代码。 公共异步任务

为什么我的值图像无法在 Vue.js 3 上加载？

我试图通过相对路径加载图像并使用 v-for 的值绑定，但网站一直告诉我网站无法获取图像，这是模板代码。 <

如何创建值列表的文本区域编辑器？

如何为多值（数组）输入创建文本编辑器？ 我的意思是我有这样的模型对象： “名称”：[ “名字1”， “名字2”， “名字3”...

如何在 Vue laravel 表中创建分页

我是 laravel 中 vue.js 的新手。我有一个数组数据，显示在 vue 的表格中。我想为每 15 个数据创建分页。我怎样才能做到这一点？任何想法 ？ vue 中的模板。 ...

为 Vuejs 创建 TradingView 终端

我目前正在开发一个项目，该项目创建一个带有交易视图平台 udf 数据源等的交易视图终端... 我在创建小部件时遇到问题。 这是我的 TradingView 组件：...

如何在 Vue JS 中处理表单列表

我有一个表单列表，我想用一个引用绑定它们。 ref 将保存一个以表单编号作为键的对象，并且值应该再次是一个其键绑定到嵌套 obj 的对象...

VueJS - 将插槽传递给子组件的子组件

我有一个列表和一个 list_item 组件，我在应用程序中多次重复使用它们。简化形式： 联系人列表.vue 。桌子 .table-header.table-row ... 我有一个列表和一个 list_item 组件，我在应用程序中多次重复使用它们。简化形式： contact_list.vue <template lang="pug"> .table .table-header.table-row .table-col Contact .table-col Info .table-body contact-list-item(v-for='contact in contacts', :contact='contact', @click='doSomething()') </template> contact_list_item.vue <template lang="pug"> .table-row(@click='emitClickEvent') .table-col {{ contact.name }} .table-col {{ contact.info }} </template> 当我在特定组件中使用 contact_list 时，我希望能够发送一个槽，将一些新列添加到 contact_list_item 组件中。此槽将使用在 contact_list_item 组件内呈现的特定联系人的数据来生成新列。 我怎样才能做到这一点？使用插槽是最好的方法吗？ 提前致谢。 插槽是最好的方法，您需要为 contact-list-item 组件使用作用域插槽。我不太熟悉 pug，所以我将使用 HTML 作为示例。 在 contact-list 中，您将添加一个插槽。请注意，在这种情况下，联系人将作为属性传递。这样我们就可以利用作用域插槽。 <div class="table"> <div class="table-header table-row"> <div class="table-col">Contact</div> <div class="table-col">Info</div> </div> <div class="table-body"> <contact-list-item v-for='contact in contacts' :contact="contact" @click="doSomething" :key="contact.id"> <slot :contact="contact"></slot> </contact-list-item> </div> </div> 然后向 contact-list-item 添加一个插槽。 <div class="table-row" @click="emitClickEvent"> <div class="table-col">{{contact.name}}</div> <div class="table-col">{{contact.info}}</div> <slot></slot> </div> 最后，在您的 Vue 模板中，使用作用域模板。 <div id="app"> <contact-list :contacts="contacts"> <template scope="{contact}"> <div class="table-col">{{contact.id}}</div> </template> </contact-list> </div> 这是一个工作示例。我不知道您的样式是什么，但请注意 id 列现在显示在 contact-list-item 中。 您可以使用 template 将插槽注册到子组件的子组件。 还有一种情况是你想要有很多命名槽。 child.vue <template> <div> <h2>I'm a father now</h2> <grandchild :babies="babies"> <template v-for="(baby, id) in babies" :slot="baby.name"> <slot :name="baby.name"/> </template> </grandchild> </div> </template> 孙子.vue <template> <div> <p v-for="(baby, id) in babies" :key="id"> <span v-if="baby.isCry">Owe...owe...</span> <slot :name="baby.name"> </p> </div> </template> parent.vue <template> <div> <h2>Come to grandpa</h2> <child :babies="myGrandChilds"> <button slot="myGrandChilds[2].name">baby cry</button> </child> </div> </template> 添加到@DrSensor的答案。 在Vue3中，你应该使用动态槽名称。 <template> <div> <h2>I'm a father now</h2> <grandchild :babies="babies"> <template v-for="(baby, id) in babies" #[baby.name]> <slot :name="baby.name"/> </template> </grandchild> </div> </template> 这里是一个使用 Vuetify Playground 的示例演示 Vue 3 动态槽/模板传递： <template #[name] v-for="slot, name in $slots"> <slot :name="name"></slot> </template> 为了方便的将几个槽位往下平移，可以使用这个链接描述的方法，稍微修改一下，也许就能往更深的方向移动。

只有最后一个 v-for 元素会被更新，而所有元素都应该被更新

导航中的 3 个页面链接应由用户选择以 3 种语言显示。在初始页面加载中它工作正常。然后单击一种语言更改链接，然后再次正常工作。但是当我点击

将渲染方法注入到模板中

Vue组件的render方法必须单独使用还是可以与模板结合使用？我的大部分组件都可以使用模板进行渲染，但只需要其中一小部分...

使用 Vue Router 单击视图中嵌入的路由器链接时，路由器视图不会更新

我的帖子页面底部有一个相关内容部分，其中显示其他相关帖子。 当点击相关内容时，我希望路由器能够更新页面。然而，这是...