vue 父子组件传值数组
时间: 2023-09-04 19:15:35 浏览: 51
可以通过props和emit来实现父子组件传值数组。
1. 父组件中定义一个数组,并通过props将其传递给子组件:
```javascript
<template>
<div>
<child-component :list="list" @addItem="addItem"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
list: ['apple', 'banana', 'orange']
}
},
methods: {
addItem(item) {
this.list.push(item)
}
}
}
</script>
```
2. 子组件中通过props接收父组件传递的数组,并通过emit将新的数组项添加到父组件中的数组中:
```javascript
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
<button @click="addItem()">Add Item</button>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
required: true
}
},
methods: {
addItem() {
this.$emit('addItem', 'new item')
}
}
}
</script>
```
在父组件中,通过@addItem监听子组件的addItem事件,并将新添加的数组项push到list中。
注意:在父组件中,不能直接修改子组件传递的props数组,需要通过emit来更新。