如何将 v-for 索引传递给其他组件
[英] How to pass v-for index to other components
本文介绍了如何将 v-for 索引传递给其他组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Vue 制作购物车应用.这是产品组件.我已经从 api 中获取了数据.我想在购物车中显示所选产品.
<div id=产品"><div id="容器"><div v-for="(product,index) in products ";:key="索引"id=产品"><img :src="products[index].image";alt="><p>desc: {{products[index].description}}</p><p>name: {{products[index].name}}</p><p>价格:$ {{products[index].price}} </p>
</模板>
如何将索引传递给购物车组件，以便我可以在其中显示信息.我知道我应该先把它传递给 App.vue 但真的不知道怎么做
<div id="购物车"><div class="px-3 py-2"><div ><p>{{products[index].description}}</p><p>{{products[index].name}}</p><img class="cart-img";src="products[index].image";流体缩略图 alt=""><b-form-spinbutton id="sb-inline";内联></b-form-spinbutton><p>{{products[index].price}}</p>
</模板>
解决方案
如果您想跨组件传递数据，您有几个选择.
第一种是使用发射将数据通过父组件向上传递到 App.vue
然后你可以通过 props 将它传递给你想要的任何组件.
这种方法引入了两个问题:道具钻取和混乱的数据流
道具钻取是指当您需要通过多个子项的道具传递一个元素时，这可能会变得混乱、混乱并降低性能(道具更改时重新渲染) - 特别是当您必须将这些数据提供给多个组件时.
数据流的问题在于，您现在让数据通过组件向上传输然后再向下传输.这使得确定状态的直接来源变得困难，并使您的状态更难以调试.
如果您使用的是 Vue2，那么您正在寻找的解决方案是 Vuex.Vuex 允许您创建一个中央存储"；其他组件可以轻松访问的状态数据.
您可以在一个组件中设置状态值，并在另一个组件中访问它，而无需在组件之间上下传递数据.
您可以查看 Vuex 入门指南了解更多信息.
如果你使用 Vue3，你可以实现 provide/inject 这是 Vue 对 React 上下文的回答，并减少了为了解决道具钻取而对更复杂的样板的需求.
I'm making a shopping cart app with Vue. This is the products component. I've fetched data from the api. I want to show the chosen product in the cart.
<template>
<div id="products" >
<div id="container">
<div v-for="(product,index) in products " :key="index" id="product" >
<img :src="products[index].image" alt="">
<p>desc: {{products[index].description}}</p>
<p>name: {{products[index].name}}</p>
<p>price: $ {{products[index].price}} </p>
</div>
</div>
</div>
</template>
How to pass the index to cart component so I can show information in it.
I know I should pass it to the App.vue first but don't really know how to do so
<template>
<div id="cart">
<div class="px-3 py-2">
<div >
<p>{{products[index].description}}</p>
<p>{{products[index].name}}</p>
<img class="cart-img" src="products[index].image" fluid thumbnail alt="">
<b-form-spinbutton id="sb-inline" inline></b-form-spinbutton>
<p>{{products[index].price}}</p>
</div>
</div>
</div>
</template>
解决方案
If you want to pass data around across components, you have a few options.
The first would be to use emits to pass the data up through the parent components to the App.vue
You would then pass it down to whatever components you want via props.
This approach introduces two problems: prop drilling and a confusing data flow
Prop drilling is when you need to pass an element through the props of multiple children which can get messy, confusing and reduce performance (re-rendering when props change) - especially when you have to provide this data to multiple components.
The problem with the data flow is that you now have data travelling up through components then back down. It makes it hard to pin-point the immediate source of the state and makes your state harder to debug.
If you're using Vue2, the solution you're looking for is Vuex. Vuex allows you to create a "central store" of your state data that other components can easily access.
You can set the value of the state in one component, and access it in another without passing data up and down between components.
You can take a look at the Vuex getting started guide for more info.
If you are using Vue3, you can implement provide/inject which is Vue's answer to React context and reduces need for more complex boilerplate just to solve prop drilling.
这篇关于如何将 v-for 索引传递给其他组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
