VueJS 2-可接受不同子组件的可重用父组件

Question

我有一个父组件，SearchComponent：

<template>
    
        <div>
            <div class="relative pl-8 pr-10 rounded bg-white border focus-within:bg-white focus-within:ring-1">
    
                <input v-focus @keyup.escape="clearSearch" @keyup="doSearch" v-model="searchTerm"
                       class="w-full ml-4 h-12 pl-1 text-gray-700 text-lg rounded-full border-0 bg-transparent focus:outline-none placeholder-gray-400"
                       placeholder="Search..." autocomplete="off">
    
    
            </div>
    
            <ul class="bg-white mt-4">
    
                <quick-search-item v-for="item in searchResults" :key="item.id" :item-data="item.itemData">
    
                </quick-search-item>
    
            </ul>
    
        </div>
    
    </template>

它负责接收用户输入并从ajax调用中获取结果，处理错误等，并生成结果列表。

我想要做的是使其泛化，这样我就可以传递不同类型的子组件(如car-search-item、person-search-item等)，而不是使用快速搜索项子组件。取决于用户在应用程序中所处位置的上下文以及他们正在搜索的内容

我已经读了很多教程，但我找不到我想要做的事情。这可能意味着我正在以错误的方式处理这个问题--但是如果有人能给我指出正确的方向，或者有更好的方法，我将非常感激。

谢谢，莱尼。

Answer 1

Schalk Pretorius是非常正确的:插槽是这个问题的答案，特别是作用域插槽。我发现Vue文档有点混乱，因为它指的是从子组件获取数据，而我想以另一种方式来做这件事，所以作为我自己的辅助备忘录和帮助其他任何人，以下是我所做的：

在我的父组件中，我这样定义了插槽：

<slot name="results" v-bind:items="searchResults">

</slot>

v-bind将searchResults (父组件中的数据项)绑定到值'items‘。然后，“‘items”将在插槽中可用。

在我的子组件中，我有一个名为items的简单属性设置：

props: {
        items: {type: Array},
    }, 

然后，为了在我的Blade文件中将它们连接在一起，我执行了以下操作：

<search-component endpoint="{{ route('quick_search.index') }}">

        <template v-slot:results="props">
            <food-results :items="props.items">

            </food-results>
        </template>


 </search-component>

这将创建search-component。在-as中，我使用命名插槽-我们需要一个模板，并使用v-slot告诉它使用哪个插槽(结果)，然后="props“显示我们在该插槽上定义的所有属性(在本例中只有一个属性，即'items')。

在模板中，我们放置子组件，然后我们可以将项绑定到props.items，它将成为父组件中的searchResults。

我很高兴这能正常工作，我现在可以在重用搜索组件的同时创建许多不同的结果组件--至少我今天学到了一些东西！

干杯，莱尼。

Answer 2

我会尝试使用<slot>元素。查看文档here

<parent-component>
  <slot></slot>
</parent-component>

希望这能让你走上正确的道路。