vue provide 数组
时间: 2023-11-17 15:05:43 浏览: 37
Vue 的 provide 选项可以用来提供数据或方法给子组件,而子组件可以使用 inject 选项来接收这些数据或方法。当 provide 的值是一个数组时,可以一次性提供多个数据或方法给子组件。例如:
```javascript
// 父组件
provide() {
return {
items: ['apple', 'banana', 'orange'],
addItem(item) {
this.items.push(item);
}
};
}
```
```vue
<!-- 子组件 -->
<template>
<div>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
<button @click="addItem('grape')">Add Grape</button>
</div>
</template>
<script>
export default {
inject: ['items', 'addItem']
};
</script>
```
在这个例子中,父组件通过 provide 提供了一个名为 items 的数组和一个名为 addItem 的方法给子组件。子组件通过 inject 接收了这两个属性,并在模板中使用了 items 数组来展示水果列表,并且在点击按钮时调用了 addItem 方法来添加新的水果。
注意,当 provide 的值是一个数组时,子组件接收到的属性会以数组的顺序进行匹配。也就是说,如果 inject 的顺序与 provide 的顺序不一致,那么对应位置的值可能会不正确。
希望这个例子能够帮助你理解 Vue 中的 provide 和 inject 用法。如果还有其他问题,请随时提问!