parent component code
<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>Sub-component code
<template>
<div class="search-container">
<div class="search-input">
<i class="iconfont"></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> this is I look at other people"s code, this place does not quite understand
props: ["funClick"] this is the parent-child method, why the fun_click of the parent component can receive the value of the child component input, the key point this.funClick (data) this place to pass the value, I do not understand,
of course, I also have my own method. In the watch listening event, change this.funClick (data) to this.$emit ("funClick",data) and pass it to the parent component according to the custom event. Can anyone take a look at the code, explain or discuss this problem?