vue3实习搜索功能，带有搜索按钮，点击搜索按钮根据关键字跳转页面，显示出包含关键词的信息集合；搜索框使用接口进行搜索，这是接口函数：const searchKnowledge = async (params: SearchKnowledge) => { const { RetCode, ReturnData } = await SearchKnowledgeApi(params); if (RetCode === 1001) { detailContent.value = ReturnData; } };这是接口数据类型：txtSearch: string, id: number，txtSearch为关键词，以这个为关键词搜索，来实现这个搜索功能，给出完整的vue3代码

下面是一份可能的实现，包含一个 Search 组件和一个 Results 组件：

<template>
  <div class="search">
    <input v-model="searchTerm" type="text" placeholder="搜索...">
    <button @click="search">搜索</button>
  </div>
  <results v-if="searchResults" :results="searchResults" />
</template>

<script>
import { defineComponent, ref } from 'vue';
import { searchKnowledge } from './api';

export default defineComponent({
  name: 'Search',

  components: {
    Results: defineComponent({
      props: {
        results: Array
      },

      template: `
        <div class="results">
          <ul>
            <li v-for="result in results" :key="result.id">
              <router-link :to="{ name: 'Result', params: { id: result.id } }">
                {{ result.title }}
              </router-link>
            </li>
          </ul>
        </div>
      `
    })
  },

  setup() {
    const searchTerm = ref('');
    const searchResults = ref([]);

    const search = async () => {
      const results = await searchKnowledge({ txtSearch: searchTerm.value });
      searchResults.value = results;
    };

    return {
      searchTerm,
      searchResults,
      search
    };
  }
});
</script>

在这个例子中，我们使用了 `defineComponent` 和 `ref` 函数来创建一个 Vue 组件和一个响应式变量 `searchTerm`。当用户点击搜索按钮时，我们调用 `searchKnowledge` 函数，并将结果存储在 `searchResults` 中。我们还使用了 Vue Router 的 `router-link` 组件来渲染搜索结果的链接。