Vue中如何分离组件？答案

【问题标题】：How to separate components in Vue?Vue中如何分离组件？
【发布时间】：2019-12-16 10:04:46
【问题描述】：

我有 Laravel 应用程序，并使用 algolia 创建搜索框，一切都很好，搜索已找到，但我现在对这段 Vue 代码提出问题：

<template>
  <ais-index app-id="myid" api-key="mykey" index-name="users">
    <ais-input class="search form-control shadow-sm rounded" placeholder="Search"></ais-input>

    <ais-results>
      <template slot-scope="{result}">
        <div>
          <h2>{{ result.name }}</h2>
          <h4>{{ result.email }}</h4>
        </div>
      </template>
    </ais-results>
  </ais-index>
</template>

<script>
  export default {};
</script>

我需要将表单（ ais-input ）放在一个地方，并将结果（ ais-results ）放在同一页面的另一个地方

类似的东西使两个组件一个用于输入，第二个用于结果（吹它将在刀片文件中）：

<div class="col-md-2">
  <search-box/> (<ais-input/>)
</div>
<div class="col-md-2">
  <result-box/> (<ais-results/>)
</div>

【问题讨论】：

是的，你可以做到。
@FarshidRezaei 请问，怎么样？
您可以创建 2 个组件并将您的部分放入其中。然后把它们放在你想要的任何地方。
是的，您可以通过创建一个单独的组件并将其导入您的模板来实现。在您的情况下，您需要在搜索框组件和其他组件中创建 <search-box> 并导入“”。
@FarshidRezaei 是的，我知道，但是它包含 algolia 的 id 和密码的 (ais-index) 如何控制它

标签： laravel vue.js

【解决方案1】：

考虑到它们似乎已经是组件，您可以尝试直接使用它们。您可以创建两个新的 Vue 组件，在其中添加现有组件：

<template>  
  <div class="col-md-2">
    <ais-input class="search form-control shadow-sm rounded" placeholder="Search"></ais-input>
  </div>
</template>

您可以根据需要在模板中使用它们。

【讨论】：

但是第一行（ais-index）包含id和密码呢？ + 我不想将我的代码放在组件中，我只需要输入并导致其他代码在刀片中。希望你明白了
考虑我的代码的第三部分，即刀片文件中的 (col-md-2)