vue慕课网音乐项目手记：49-搜索列表的实现_vue音乐项目搜索歌曲实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40814356/article/details/80494949

本文介绍了一个基于Vue的搜索历史组件实现过程。该组件通过父组件传递搜索历史数据，并利用子组件展示每条搜索记录及对应的删除按钮。文章详细描述了组件的HTML结构和CSS样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述
search.vue里面的dom如下：

<div class="search-history" v-show="searchHistory.length  ">
          <h1 class="title">
            <span class="text">搜索历史</span>
            <span class="clear">
              <i class="icon-clear"></i>
            </span>
          </h1>
          <search-list :searches="searchHistory"></search-list>
        </div>

css样式如下：

.search-history
          position: relative
          margin: 0 20px
          .title
            display: flex
            align-items: center
            height: 40px
            font-size: $font-size-medium
            color: $color-text-l
            .text
              flex: 1
            .clear
              extend-click()
              .icon-clear
                font-size: $font-size-medium
                color: $color-text-d

然后新建一个公共的组件：

<template>
  <div class="search-list" v-show="searches.length">
    <ul>
      <li class="search-item" v-for="(item, index) in searches" :key="index">
        <span class=text>{{item}}</span>
        <span class="icon">
          <i class="icon-delete"></i>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    searches: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable'

  .search-list
    .search-item
      display flex
      align-items center
      height 40px
      .text
        flex 1
        color $color-text-l
      .icon
        extend-click()
        .icon-delete
          font-size $font-size-small
          color $color-text-d
</style>

search.vue里面使用组件，把searchHistory的数据传递给子组件：

<search-list :searches="searchHistory"></search-list>