父组件向子组件传值的正确姿势

最近接手一个项目 算是打破之前的认知 因为抱着墨守成规的态度 所以对于父组件向子组件传值 都是通过 props 的方式

<my-header :title="'头部信息'" />

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

至于通过获取子组件实例 调用子组件方法传参的方式 很少涉猎

<my-header ref="myHeader" />
  
this.$refs.myHeader.setTitle('头部信息')

但是项目却都充斥着第二种方式 导致我一下就茫然了
到底哪种是正统？到底哪种是正统？到底哪种是正统？
故抱着疑问 向群里大佬发出了疑问 得到了各式各样的答案






一边倒的答案 第一种才是正统
归纳一下原因
1、第二种可维护性差 不够一目了然 需深入到组件内部了解
2、操作虚拟 dom 的代价偏高 jq 思维
3、耦合性大 父子需要相互依赖
4、与单向流动相斥 父子都能改变 不好追溯
结果不言而喻