vue3一个组件中 一个set()集合在中多个ElNotification中怎么增加和删除元素
时间: 2024-03-16 11:42:38 浏览: 51
element vue Array数组和Map对象的添加与删除操作
5星 · 资源好评率100%
要在同一个组件中,在多个 `ElNotification` 中增加和删除 `Set` 集合中的元素,可以将 `Set` 集合定义在组件的状态中,然后在组件中定义用于增加和删除集合元素的方法。在多个 `ElNotification` 中,可以使用 `$emit` 方法将需要增加或删除的元素传递给组件,然后在组件中调用相应的方法。
以下是一个示例代码片段:
```html
<template>
<div>
<el-button @click="addItem('a')">Add Item 'a'</el-button>
<el-button @click="removeItem('a')">Remove Item 'a'</el-button>
</div>
</template>
<script>
export default {
data() {
return {
items: new Set()
}
},
methods: {
addItem(item) {
this.items.add(item)
},
removeItem(item) {
this.items.delete(item)
}
},
mounted() {
this.$on('addItem', this.addItem)
this.$on('removeItem', this.removeItem)
},
beforeUnmount() {
this.$off('addItem', this.addItem)
this.$off('removeItem', this.removeItem)
}
}
</script>
```
在多个 `ElNotification` 中,可以使用 `$emit` 方法将需要增加或删除的元素传递给组件:
```html
<template>
<div>
<el-button @click="$emit('addItem', 'a')">Add Item 'a'</el-button>
<el-button @click="$emit('removeItem', 'a')">Remove Item 'a'</el-button>
</div>
</template>
```
这样,在多个 `ElNotification` 中,都可以使用 `$emit` 方法将需要增加或删除的元素传递给组件,然后组件中的方法会将元素添加或删除到组件的 `Set` 集合中。
阅读全文