2回答

Sam

2019-12-18

已采纳

好的，下面提供一些示例代码，假设子组件的名称为 FilterContainer，子组件源码类似下面这样：

<div class="filter-container">  
  <el-input    
    v-model="listQuery.title"    
    placeholder="书名"    
    style="width: 200px"    
    class="filter-item"  
    clearable    
    @keyup.enter.native="handleFilter"    
    @clear="handleFilter"    
    @blur="handleFilter"  
  />
</div>

在子组件的 handleFilter 方法中，调用父组件传入的 onChange 事件，并将子组件的 listQuery 传入：

handleFilter() {
  console.log('handleFilter', this.listQuery)
  this.listQuery.page = 1
  this.refresh()
  this.$emit('onChange', this.listQuery) // 调用父组件传入的事件
}

那么我们在父组件中可以引用 FilterContainer 这个组件并绑定 onChange 事件：

<filter-container @onChange="onFilterChange" />

然后在父组件中处理这个事件

methods: {  
  onFilterChange(listQuery) {    
    this.listQuery = listQuery  
  }
}

这样我们就将子组件的 listQuery 传递到父组件的 listQuery 了

0

1

SpringSecurity

非常感谢！谢谢老师

2019-12-19

共1条回复

Sam

2019-12-17

你好，这个时候我们需要进行父子组件通信，比如通过vuex来统一存储状态，或者用onChange事件手动更新父组件状态等，都是可行的方案

1

1

SpringSecurity

老师，您可以给一段示例代码吗？我必感激不尽。

2019-12-18

共1条回复