Vuejs2 VueJS 2-可重复使用的父组件，可接受不同的子组件

我有一个父组件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调用中获取结果，处理错误等，并生成结果列表

我想做的是使其通用化，这样我就可以根据用户在应用程序中的位置和搜索内容，传入不同类型的子组件（如汽车搜索项目、个人搜索项目等），而不是快速搜索项目子组件

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

谢谢，

---

Lenny。

我会尽量利用

元素。查看文档

---

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

沙尔克·普雷托里厄斯（Schalk Pretorius）说得很对：插槽就是这个问题的答案，特别是作用域插槽。我发现Vue文档有点让人困惑，因为它指的是从子组件获取数据，我想用另一种方式来做，因此作为我自己和帮助其他人的备忘录，我做了如下工作：

在父组件中，我定义了如下插槽：

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

</slot>

然后，为了在我的刀片文件中将其全部钩住，我做了以下操作：

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

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

            </food-results>
        </template>


 </search-component>

这将创建搜索组件。在这里面——正如我使用命名插槽一样——我们需要一个模板，并使用v-slot告诉它要使用哪个插槽（结果），然后=“props”公开我们在该插槽上定义的所有属性（在本例中，只有一个“项”）

在模板中，我们放置子组件，然后可以将项目绑定到props.items，这将是父组件中的搜索结果

我很高兴这项功能能够发挥作用，我现在可以在重用搜索组件的同时创建许多不同的结果组件——至少今天我学到了一些东西

干杯， 莱尼

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

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

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

            </food-results>
        </template>


 </search-component>