vue 父组件如何调用子组件中的方法

父组件调用

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>