商品分类（一）-实现分类页面的顶部搜索栏 & 所需页面引用封装组件的使用方法

商品分类

顶部搜索栏

• 公共组件封装

<div class="search">
    <div class="search-item">
        <icon type='search'/>
        <span>搜索</span>
    </div>
</div>

  // 导入组件
  import SearchBar from '../../components/searchbar'
  // 配置组件
  exports default {
    components: {
      'search-bar': SearchBar
    }
  }
  // 使用组件
  <template>
    <search-bar></search-bar>
  </template>

• 导入公共组件
• 通过components属性配置组件
• 使用组件

所需页面中，进行引入搜索组件

展示效果