如何在Tailwind中显示组件？

Question

我需要使用Tailwind和Vue.js创建一个网站。appheader，appfooter，搜索栏，filtercontainer等组件将位于不同的文件中。问题是我不知道如何在它们之间建立联系，所以它们都显示出来。现在，我可以显示应用程序标题，应用程序页脚和搜索栏，但不能显示过滤器容器。代码如下： App.vue

<div id="app" class="bg-gray-200 font-sans flex flex-col min-h-screen">
 <AppHeader />
 <router-view class="flex-grow"></router-view>
 <AppFooter />
</div>
</template>

<script>

import AppHeader from './components/layout/AppHeader';
import AppFooter from './components/layout/AppFooter';

export default {
name: 'app',
watch: {
   '$route' (to) {
     document.title = to.meta.title || 'Logzor'
   }
 },
components: {
 AppHeader,
 AppFooter
}

}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
</style>

AppHeader.vue

  <header>
  <nav class="font-sans flex flex-col text-center content-center sm:flex-row sm:text-left sm:justify-between py-2 px-6 bg-white shadow sm:items-baseline w-full">

  <div class="mb-2 sm:mb-0 flex flex-row
  ">
    <div class="h-10 w-10 self-center mr-2">
      <img class="h-10 w-10 self-center" src="https://csscomps.com/images/csscomps.png" />
    </div>
    <div>
      <a href="/home" class="text-2xl no-underline text-grey-darkest hover:text-blue-dark font-sans font-bold">Log</a><br>
      <span class="text-xs text-grey-dark">Log files</span>
    </div>
  </div>

  <div class="sm:mb-0 self-center">
    <!-- <div class="h-10" style="display: table-cell, vertical-align: middle;"> -->
    <a href="#" class="text-md no-underline text-black hover:text-blue-dark ml-2 px-1">Link1</a>
    <a href="#" class="text-md no-underline text-grey-darker hover:text-blue-dark ml-2 px-1">Link2</a>
    <!-- <a href="/two" class="text-lg no-underline text-grey-darkest hover:text-blue-dark ml-2">About Us</a> -->
    <a href="#" class="text-md no-underline text-grey-darker hover:text-blue-dark ml-2 px-1">Link3</a>
    <!-- </div> -->

  </div>
</nav>
  </header>
</template>
<style>
</style>

SearchBar.vue

<template>
<!-- Searchbar -->
    <div class="flex w-full">
      <input  type="text" v-model="search.search" class="h-16 appearance-none rounded-l w-full py-2 px-2 ml-2 text-gray-700 leading-tight focus:outline-none text-2xl" id="search" placeholder="Search...">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-12 rounded-r ">    SEARCH   </button>

    </div>
</template>

<script>
export default {
  props: [
    'search',
  ],
  data() {
    return {
    }
  },
  methods: {
  },
  watch: {
    value() {
      this.$emit('collectSearch', this.search)
    }
  }
}
</script>

<style scoped>

</style>

FilterContainer.vue

<template>

         <div class="w-full lg:w-1/5 lg:px-6 text-xl text-gray-800 leading-normal">
            <p class="text-base font-bold py-2 lg:pb-6 text-gray-700">Menu</p>
            <div class="block lg:hidden sticky inset-0">
               <button id="menu-toggle" class="flex w-full justify-end px-3 py-3 bg-white lg:bg-transparent border rounded border-gray-600 hover:border-purple-500 appearance-none focus:outline-none">
                  <svg class="fill-current h-3 float-right" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                  </svg>
               </button>
            </div>
            <div class="w-full sticky inset-0 hidden h-64 lg:h-auto overflow-x-hidden overflow-y-auto lg:overflow-y-hidden lg:block mt-0 border border-gray-400 lg:border-transparent bg-white shadow lg:shadow-none lg:bg-transparent z-20" style="top:5em;" id="menu-content">
               <ul class="list-reset">
                  <li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
                     <a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:border-purple-500 lg:hover:border-purple-500">
                     <span class="pb-1 md:pb-0 text-sm text-gray-900 font-bold">Home</span>
                     </a>
                  </li>
                  <li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
                     <a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
                     <span class="pb-1 md:pb-0 text-sm">Tasks</span>
                     </a>
                  </li>
                  <li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
                     <a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
                     <span class="pb-1 md:pb-0 text-sm">Messages</span>
                     </a>
                  </li>
                  <li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
                     <a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
                     <span class="pb-1 md:pb-0 text-sm">Analytics</span>
                     </a>
                  </li>
                  <li class="py-2 md:my-0 hover:bg-purple-100 lg:hover:bg-transparent">
                     <a href="#" class="block pl-4 align-middle text-gray-700 no-underline hover:text-purple-500 border-l-4 border-transparent lg:hover:border-gray-400">
                     <span class="pb-1 md:pb-0 text-sm">Payments</span>
                     </a>
                  </li>
               </ul>
            </div>
         </div>

</template>

<script>
export default {

}
</script>

<style scoped>

</style>