Vue.js 如何从父组件清除子组件内的表单输入字段值

方案1：子组件暴露重置方法（推荐当前场景使用） #

这是最适合多输入项重置场景的实现，逻辑内聚在子组件内部，父组件无需感知子组件的具体输入项结构。

1. 子组件内定义公共重置方法，完成所有输入项清空+状态同步逻辑：

// 子组件内部方法
selectedStatus: function(status) {
  this.$emit('updateStatus', status)
},
// 新增重置方法
resetFilters() {
  // 清空所有内部绑定的表单状态，自动更新UI
  this.selectedStatus = []
  this.startDate = null
  this.endDate = null
  // 其他输入项的清空逻辑依次添加即可
  // 同步通知父组件更新表格/仪表盘数据
  this.$emit('updateStatus', [])
}

2. 父组件给子组件绑定ref标识，需要重置时直接调用子组件方法：

<!-- 父组件模板 -->
<SidebarFilter ref="filterSidebar" @updateStatus="handleStatusUpdate" />

// 父组件触发重置的逻辑
handleReset() {
  this.$refs.filterSidebar.resetFilters()
}

方案2：父子组件状态双向绑定 #

如果需要父组件直接控制子组件的筛选值，可以通过props+监听器实现状态同步：

1. 子组件新增props接收父组件传的筛选状态，同时监听props变化同步更新内部状态：

// 子组件配置
props: {
  currentStatus: {
    type: Array,
    default: () => []
  }
},
watch: {
  currentStatus(newVal) {
    // 父组件状态变化时自动更新子组件内部状态和UI
    this.selectedStatus = newVal
  }
}

2. 父组件传值绑定，重置时直接修改自身状态即可：

<!-- 父组件模板 -->
<SidebarFilter :currentStatus="selectedStatus" @updateStatus="selectedStatus = $event" />

// 父组件触发重置的逻辑
handleReset() {
  this.selectedStatus = []
}

内容的提问来源于stack exchange，提问作者Nubtacular