Vue中使用ais-hits组件提取模板至独立组件后显示异常，如何修正？

你当前的问题是没有正确接收ais-hits组件传递的数据，导致触发了组件的默认渲染逻辑，显示出objectID和index信息。以下是两种正确的写法：

写法一：通过默认插槽接收items后循环 #

保留ais-hits的默认插槽，先获取组件传递的items数组，再循环渲染你的SearchCard组件：

<ais-hits>
    <template #default="{ items }">
        <SearchCard 
            v-for="item in items" 
            :key="item.objectID" 
            :item="item" 
        />
    </template>
</ais-hits>

写法二：利用item插槽直接渲染单条数据 #

Vue InstantSearch的ais-hits提供了item插槽，专门用于自定义单条搜索结果的渲染，无需手动写循环，写法更简洁：

<ais-hits>
    <template #item="{ item }">
        <SearchCard :item="item" />
    </template>
</ais-hits>

你的SearchCard.vue组件可以保持现有内容，后续需要显示item具体字段时，直接通过props接收的item对象访问对应属性即可。

内容的提问来源于stack exchange，提问作者Tyssen