侦听器watch的使用

<!--侦听器watch的使用--小程序
页面传参给组件，因为页面的生命周期传的参数是通过onLoad(options)传递
，onLoad相当于组件的mounted生命周期，而组件从父页面传递过来的参数
是在created里面执行，所以获取过来的参数无法在页面渲染，因为传递过来
的参数首先在created里面的时候是空的，再通过mounted执行后，而页面
已经执行完成，再获取到的数据无法渲染页面，此时要通过侦听器解决 -->


<!-- 搜索列表---------父页面 -->
<searchBar @searchHandler="searchHandler" :keyName="keyName"/>

<!-- 搜索列表---------子页面 -->
<template>
	<view class="header">
	  <input type="text" v-model="inputVal" @confirm="confirmHandler" />
	  <icon class="search-icon"
	        type="search"
	        size="16">
	  </icon>
	  <icon class="clear-icon" v-if="inputVal" @click="clearIpt"
	        type="clear"
	        size="16"
	        color="#ccc">
	  </icon>
	</view>
</template>
<script>
	export default {
	//从父页面将关键字传递过来，
		props:['keyName'],
		data() {
			return {
			//进入页面后就进行数据渲染，传递的数据实际是在mounted执行的
			//在页面渲染后已经渲染完成，所以要用监听器监听数据的变化进
			//行二次渲染
				inputVal:this.keyName
			};
		},
	     //进入页面后就进行数据渲染，传递的数据实际是在mounted执行的
		//在页面渲染后已经渲染完成，所以要用监听器监听数据的变化进
		//行二次渲染
		watch:{
			keyName(newVal){
				this.inputVal=newVal
			}
		},
		methods:{
			confirmHandler(){
				if(this.inputVal){
					this.$emit('searchHandler',this.inputVal)
				}
			}
		}
	}
</script>