Vue 子组件 emit 传值清空父页面数据方法

在 Vue 中，子组件可以使用 emit 事件将数据传递给父组件。当父组件再次进入时，如果需要清空上次搜索的数据，可以采取以下步骤：

1. 在父组件中定义一个数据变量来保存子组件传递过来的数据。

2. 在子组件的 emit 事件中更新这个变量。

3. 当父组件再次进入时，将这个变量重置为空即可。

示例代码

父页面

<template>
  <div>
    <child-component @search='handleSearch'></child-component>
    <button @click='resetSearch'>清空搜索数据</button>
  </div>
</template>
<script>
export default {
data() {
return {
searchData: null
}
},
methods: {
handleSearch(data) {
this.searchData = data;
},
resetSearch() {
this.searchData = null;
}
}
};
</script>

子组件

<template>
  <div>
    <input v-model='searchText' type='text'>
    <button @click='search'>搜索</button>
  </div>
</template>
<script>
export default {
data() {
return {
searchText: ''
}
},
methods: {
search() {
this.$emit('search', this.searchText);
}
}
};
</script>

在父页面中，通过 @search 事件监听子组件的搜索事件，并将子组件传递过来的数据保存到 searchData 变量中。当点击“清空搜索数据”按钮时，将 searchData 重置为空。