Vue 组件封装：如何清空页面加载时的搜索信息

<p>要清空上次搜索的信息，你可以使用以下方法之一：</p>
<ol>
<li>
<p>在组件的 <code>created</code> 生命周期钩子中，将存储搜索信息的数据重置为空。例如：</p>
<pre><code class="language-javascript">export default {
  data() {
    return {
      searchQuery: '' // 存储搜索信息的数据
    }
  },
  created() {
    this.searchQuery = '' // 清空搜索信息
  }
};
</code></pre>
</li>
<li>
<p>在组件的方法中，当你需要清空搜索信息时，将存储搜索信息的数据重置为空。例如：</p>
<pre><code class="language-javascript">export default {
  data() {
    return {
      searchQuery: '' // 存储搜索信息的数据
    }
  },
  methods: {
    clearSearch() {
      this.searchQuery = '' // 清空搜索信息
    }
  }
};
</code></pre>
</li>
</ol>
<p>然后，你可以在页面中引用该组件，并在进入页面时调用 <code>clearSearch</code> 方法来清空搜索信息：</p>
<pre><code class="language-html"><template>
  <div>
    <search-bar ref="searchBar"></search-bar>
    <!-- 其他内容 -->
  </div>
</template>

<script>
import SearchBar from './SearchBar.vue'

export default {
  mounted() {
    this.$refs.searchBar.clearSearch() // 清空搜索信息
  },
  components: {
    SearchBar
  }
}
</script></code></pre>
<p>这样，每次进入页面时，搜索信息就会被清空。</p>