在Vue中现存在两个兄弟组件,footer和body组件,在footer组件中有一个全选多选框,在点击了footer组件的全选多选框之后,怎么让body组件中的所有多选框全选
时间: 2023-12-06 15:04:21 浏览: 69
利用Vue.js指令实现全选功能
可以通过在footer组件中使用事件总线(Event Bus)的方式来实现该功能。具体实现步骤如下:
1. 在Vue中创建一个新的Vue实例作为事件总线,例如:
```javascript
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
```
2. 在footer组件中,当全选多选框被选中时,触发一个事件,将选中状态作为参数传递给事件:
```javascript
// Footer.vue
<template>
<div>
<input type="checkbox" v-model="isSelected" @change="selectAll">
</div>
</template>
<script>
import { EventBus } from '@/EventBus';
export default {
data() {
return {
isSelected: false
}
},
methods: {
selectAll() {
EventBus.$emit('select-all', this.isSelected);
}
}
}
</script>
```
3. 在body组件中,监听该事件,根据传递过来的选中状态,改变所有多选框的选中状态:
```javascript
// Body.vue
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.isSelected">
</div>
</div>
</template>
<script>
import { EventBus } from '@/EventBus';
export default {
data() {
return {
items: [
{ isSelected: false },
{ isSelected: false },
{ isSelected: false }
]
}
},
created() {
EventBus.$on('select-all', (isSelected) => {
this.items.forEach(item => {
item.isSelected = isSelected;
});
});
}
}
</script>
```
这样,当footer组件中的全选多选框被选中时,body组件中的所有多选框都会被选中。
阅读全文