父组件代码

<template>
  <div id="app">
    <search :funClick="func_click"></search>
  </div>
</template>

<script>
import Search from '@/components/search'
export default {
  name: 'App',
  data (){
    return{
      searchData:''
    }
  },
  methods:{
    func_click(val){
      this.searchData = val;
    }
  },
  components:{
    'search':Search,
  }
}
</script>

子组件代码

<template>
    <div class="search-container">
        <div class="search-input">
            <i class="iconfont">&#xe7d1;</i>
            <input type="text" autofocus="autofocus" v-model.trim="search_val">
        </div>
    </div>
</template>
<script>
export default {
    props:['funClick'],
    data (){
        return{
            search_val:""
        }
    },
    watch:{
        search_val(data){
            if(data!==""){
                this.funClick(data);
            }
        }
    }
}
</script>

这个是我看别人的代码，这个地方不太明白
props:['funClick']这个是父传子的方法，为什么父组件的fun_click可以收到子组件input的value值，关键点事this.funClick(data)这个地方传值，我看不明白，

当然我也有自己的方法是，子传父,在watch监听事件里面吧this.funClick(data) 改成this.$emit('funClick',data)把这个按照自定义事件传给父组件，有哪位能看一下代码，解释或者探讨一下这个问题吗？