搜索框单独组件

搜索框组件
 <template>
  <div class="search-box">
  	<i class="icon-search"></i>
    <!-- v-model 会把对应在data内的对象进行绑定 从而进行双向数据写入 -->
    <input ref="query" class="box" :placeholder="placeholder" v-model="query">
    <i @click="clear" v-show="query" class="icon-dismiss"></i>
  </div>
   </template>
   <script>
   
	props:{
	 	
	 	}
	 	data(){
	 	return {
	 			query :""
	 	}
	 	},
	 	methosd :{
	 		情空文本区域内容
	 		
				clear(){
					this.query =""
				},
				把父元素的自动填写的内容传递到quryy
				setQuery(query){
				this.query =query
					},
					取消 选中
					blur (){
					this.$refs.query.blur()
	}
	 	},
	 	created(){
	 		// 组件创建的时候 执行监听data的query数据变化
   			 // 利用debounce来减少无用请求
   			 this.$watch('query',debounce((newQuery)=>{
   			 	把数据
			派发出去
				this.$emit('query',newQuery)
				},2000))
		}
		 }
</script>