【发布时间】:2023-05-07 06:36:01
【问题描述】:
我有多个组件,每个组件中都有一个“销毁”按钮,在以下示例中,此按钮将有 4 个实例:
我可以在组件的“destroy”函数中添加什么,使其仅销毁被点击的“mycomponent”实例?
我有多个组件,每个组件中都有一个“销毁”按钮,在以下示例中,此按钮将有 4 个实例:
我可以在组件的“destroy”函数中添加什么,使其仅销毁被点击的“mycomponent”实例?
一个可能的选项:您定义应该在容器的视图模型中显示的组件及其数据。该视图只是将所有组件呈现为一个数组。需要移除的组件会发出一个由容器捕获的事件。这会触发容器代码从需要渲染的组件列表中删除该组件。
视图模型:
components = [{
id: "a",
val: 5
}, {
id: "b",
val: 7
}];
removeComponent(id) {
this.components = this.components.filter(e => e.id != id);
}
模板:
此示例使用按钮而不是 mycomponent。但只要你的组件发出一个你的容器可以监听的事件,都是一样的。
【讨论】: