Vue parent and child components encountered problems in passing values

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?

Mar.30,2021

it is not difficult to understand that the parent component passes its own function func_click to the child component through props- > funClick , and the child component calls funClick is tantamount to calling the func_click of the parent component
but officially recommends


to exchange data according to your way of thinking, that is, through $emit .

roughly say:
first, the writing method in the above code is more in line with the idea of react, and the purpose of changing the data is achieved by passing the callback function.
second, your own approach is very standard vue writing, which is achieved through event notification distribution, similar to the publish / subscribe model.

as for your doubts:

watch:{
    search_val(data){
        if(data!==""){
            this.funClick(data);
        }
    }
}

because we use watch, to refer to vue's official website api, we can know that the first parameter data, here is the latest value of input;
then funClick is passed through prop, so you can access it directly with this, passing the parameter data, which is the current value of input.

to understand, what is a function? a function is stored in the heap, is a reference type, and is passed by reference like Object. It's just that you define a function in the parent component and get another component call.


the first method is to execute the function directly, and the second is to notify the parent component to execute the function. The second is relatively clear, which is also recommended by the official website of vue.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b4152f-2bdd0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b4152f-2bdd0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?