Question

我有Laravel应用，并使用documented创建了一个搜索框，一切都很好，可以找到搜索内容，但是现在我对Vue的这段代码有疑问：

 differ = jsondiffpatch.create({
    textDiff: {
    // default 60, minimum string length (left and right sides) to use text diff algorythm: google-diff-match-patch
    minLength: 10000
},
});

我需要将表格（ais-input）放在一个地方，然后将结果（ais-results）放到同一页的另一个地方

类似的东西使两个组成部分分别作为输入和结果的第二部分（显示在刀片文件中）：

<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>

Answer 1

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

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

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

如何在Vue中分离组件？

1 个答案: