vue.js - Algolia & Vue 即时搜索 : Customising widgets with slot

Question

我正在尝试为 Vue 修改 InstantSearch 小部件的输出。

在文档 ( https://www.algolia.com/doc/api-reference/widgets/hits/vue/#customize-the-ui ) 中它说使用作用域槽将覆盖小部件的完整 DOM 输出:

但这里好像不是这样。这是我下面的代码，使用带有简单 <tr> 的插槽和 <td>元素:

而不是渲染 <tr>与 <td>在里面，我看到这里:

• 一个div，带有一类ais-Hits
• 具有 ais-Hits-list 类的嵌套 ol
• 一个嵌套的 li 类 ais-Hits-item

输出是这样的:

如果我去 inspect element 并删除上面提到的元素(查看 div、ol 和 li 被删除):

那么结果是正确的:

我做错了什么吗？插槽不应该覆盖 DOM 输出并将其余部分留给开发人员来设计样式吗？

如有任何帮助，我们将不胜感激!

Answer 1

您必须使用 default插槽而不是 item。您将完全控制渲染。

<ais-hits>
  <ol slot-scope="{ items }">
    <li v-for="item in items" :key="item.objectID">
      <ais-highlight :hit="item" attribute="name" />
      <p>
        <ais-highlight :hit="item" attribute="description" />
      </p>
    </li>
  </ol>
</ais-hits>

这是关于 CodeSandbox 的例子.

---

ais-Hits 将始终用 div 包装默认插槽(有关解释，请参阅 GitHub)。避免此问题的唯一选择是 create your own widget使用 mixin createWidgetMixin:

<template>
  <ol v-if="state">
    <li v-for="item in state.hits" :key="item.objectID">
      <ais-highlight :hit="item" attribute="name" />
      <p>
        <ais-highlight :hit="item" attribute="description" />
      </p>
    </li>
  </ol>
</template>

<script>
import { createWidgetMixin } from "vue-instantsearch";
import { connectHits } from "instantsearch.js/es/connectors";

export default {
  mixins: [createWidgetMixin({ connector: connectHits })]
};
</script>

这是关于 CodeSandbox 的例子.