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

40次阅读

共计 400 个字符，预计需要花费 1 分钟才能阅读完成。

最近接手一个项目算是打破之前的认知因为抱着墨守成规的态度所以对于父组件向子组件传值都是通过 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、与单向流动相斥父子都能改变不好追溯
结果不言而喻