Correct posture for parent component to pass value to child component

Posted May 27, 20202 min read

Recently, I took over a project, which is considered to break the previous cognition. Because of the stereotyped attitude, the value of the parent component to the child component is through props.

<my-header:title = "'Header Information'" />

export default {
  props:{
    title:{
      type:String,
      required:true
    }
  }
};

As for the method of passing subcomponent methods by obtaining subcomponent instances, it is rarely involved

<my-header ref = "myHeader" />

this. $refs.myHeader.setTitle('Header information')

But the project is full of the second way, which makes me dazed
Which one is orthodox? Which one is orthodox? Which one is orthodox?
So I questioned the group and asked all kinds of answers. I got all kinds of answers.
WeChat Picture_20200527212154.jpg
WeChat Picture_20200527212138.jpg
WeChat Picture_20200527212209.jpg
WeChat Picture_20200527212217.jpg
WeChat Picture_20200527212148.jpg
WeChat Picture_20200527212203.jpg
The one-sided answer is the first orthodox
Sum up the reasons

  1. The second type has poor maintainability and is not clear at a glance.
  2. The cost of operating virtual dom is too high jq thinking
  3. Great coupling, father and son need to depend on each other
  4. Repelled with unidirectional flow, both father and son can change, not easy to trace
    The result is self-evident