<template>

  <div class="search-box">

    <i class="icon-search"></i>

    <input class="box" v-model="query" :placeholder="placeholder">

    <i @click="clear" v-show="query" class="icon-dismiss"></i>

  </div>

</template>

<script>

export default {

  props: {

    placeholder: {

      type: String,

      default: '搜索歌曲、歌手'

    }

  },

  data() {

    return {

      query: ''

    }

  },

  methods: {

    clear() {

      this.query = ''

    }

  },

  created() {

    this.$watch('query', (newQuery) => {

      this.$emit('query', newQuery)

    })

  }

}

</script>