父组件调用
html
<SearchCom @inputInfo="inputInfo" ref="inputInfoVal"></SearchCom>
js 父组件下拉刷新调用子组件清空的值
this.$refs.inputInfoVal.clearIt();
子组件代码
html
<template>
<view class="searchCom" >
<input type="text" v-model="keyWord" @confirm="searchInfo" placeholder="关键字搜索" />
<view class="clearImg" @click="clearIt()" v-show="keyWord">
<image :src="celarImg" mode="" v-show="keyWord"></image>
</view>
</view>
</template>
js
<script>
export default {
data() {
return {
keyWord: '',
celarImg: '/static/image/home/clear.png',
searchImg: '/static/image/home/search.png',
};
},
methods: {
// 关键字筛选
searchInfo(event) {
let data = {
keyWord:event.detail.value,
type:'enter'
}
this.$emit('inputInfo',data)
},
// 清空
clearIt() {
this.keyWord = ''
let data = {
keyWord:this.keyWord,
type:''
}
if (data.keyWord == '') {
this.$emit('inputInfo', data)
}
}
}
};
</script>