Vue父子組件傳值遇到問題

父組件代碼

<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>

這個(gè)是我看別人的代碼，這個(gè)地方不太明白
props:['funClick']這個(gè)是父傳子的方法，為什么父組件的fun_click可以收到子組件input的value值，關(guān)鍵點(diǎn)事this.funClick(data)這個(gè)地方傳值，我看不明白，

當(dāng)然我也有自己的方法是，子傳父,在watch監(jiān)聽事件里面吧this.funClick(data) 改成this.$emit('funClick',data)把這個(gè)按照自定義事件傳給父組件，有哪位能看一下代碼，解釋或者探討一下這個(gè)問題嗎？