如何进行v-for将vue里面的数据用到另一个vue里面
时间: 2023-10-18 19:02:13 浏览: 46
可以使用Vue.js的props属性将数据从一个组件传递到另一个组件。在发送数据的组件中,使用props属性来声明要传递的数据。在接收数据的组件中,使用props属性来接收数据。
例如,在发送数据的组件中:
```
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
<ReceivingComponent :items="items"></ReceivingComponent>
</div>
</template>
<script>
import ReceivingComponent from './ReceivingComponent.vue';
export default {
components: {
ReceivingComponent,
},
data() {
return {
items: ['item1', 'item2', 'item3'],
};
},
};
</script>
```
在接收数据的组件中:
```
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true,
},
},
};
</script>
```
通过在发送数据的组件中使用`:items="items"`来将`items`数组传递给接收数据的组件,然后在接收数据的组件中使用`props`来接收数据。