javascript - Vue.js - 从父组件中清除子表单字段

Question

我有一个带有一些下拉菜单的子侧边栏组件。简化示例：

您在此处选择一个状态，它会在父组件中重新呈现表格/仪表板视图。这是通过$emit在子组件中处理的，如下所示：

selectedStatus: function(status) {
  this.$emit('updateStatus', status)
},

那里没有问题。现在我希望能够从父组件中清除或重置此输入。正如我所说，这是一个简化的示例，有许多下拉菜单、几个日期时间选择器和其他要清除的输入。

如果我做类似的事情

this.selectedStatus = []在父级中，它确实正确地重置/重新渲染表/数据，但它仍然显示 UI 部分（即下拉列表中的选定状态）。

如果我做类似的事情

this.selectedStatus = []在孩子中，它确实正确地将 UI 部分删除/更改到它清除下拉列表的位置。

从父级清除子级过滤器/输入的正确方法是什么？

标签： javascriptvue.js

Answer 1

我建议你阅读这篇文章，它解释了使子组件重新渲染（并因此重置它的状态）的所有方法。