Vue 组件间数据传递：如何清空父组件上次搜索数据

在 Vue 中，如果封装的组件再次进入页面时会自动带入上次搜索的数据，而搜索数据是由子组件传给父组件的，那么如何在父组件中清空上次搜索的数据呢？可以通过以下步骤实现：

在父组件中定义一个变量，用于保存搜索数据。例如，可以定义一个名为searchData的变量。
在父组件的模板中使用子组件，并为子组件绑定一个名为searchData的属性，将父组件中的searchData变量传递给子组件。
在子组件中，通过props接收父组件传递的searchData属性，并使用该属性在子组件中展示搜索数据。
在父组件中，定义一个方法，用于清空搜索数据。例如，可以定义一个名为clearSearchData的方法，在该方法中将searchData变量重置为空。
在父组件的模板中，添加一个按钮或其他交互元素，用于触发clearSearchData方法。

下面是一个简单的示例代码：

<template>
  <div>
    <!-- 子组件 -->
    <child-component :searchData='searchData'></child-component>
    
    <!-- 清空搜索数据的按钮 -->
    <button @click='clearSearchData'>清空搜索数据</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      searchData: ''
    };
  },
  methods: {
    clearSearchData() {
      this.searchData = '';
    }
  }
};
</script>

在上面的示例中，父组件通过searchData属性将搜索数据传递给子组件，并在父组件中定义了clearSearchData方法来清空搜索数据。当点击清空按钮时，会触发clearSearchData方法，从而清空searchData变量的值。这样，下次进入页面时，搜索数据会自动清空。