陷阱: 由前端组件间方法错误引用产生

开发中遇到一个重构导致的巨大bug. 先说明情况如下:

父组件使用子组件如下:

<div class="btnMain">
  <ToolBar @clearStatus="clearStatus" @import:success="importSuccess" />
</div>

父组件有个方法:

// 计算搜索表单数据对象
function queryParame(ispageNum = true) {...}

子组件的方法使用了父组件的方法

 function exportFullData(type) {
      const params = parent.queryParame(false)
      ...
 }

这种强依赖了父组件虽然可以使用, 但不为推荐. 无法再开发时明确依赖关系. 重构时, 将导致运行时异常. 本次的bug就是因为将意义不准确的方法名改为意义明确方法( queryParame 改为 getQueryParam ), 导致子组件无法找到方法而产生异常.

推荐方案

1. 提取公共方法, 父子组件共用
2. 子组件明确使用接口, 通过props约束, 可以参考如下改动:

• 子组件改动:

 props: {
    getQueryParam: Function,
  },

...

 const params = props.getQueryParam(false)

• 父组件改动:

 <div class="btnMain">
    <ToolBar :getQueryParam="getQueryParam" @clearStatus="clearStatus" @import:success="importSuccess" />
  </div>

这些方案可以在开发就能知道引用关系, 编译就会报错, 不会产生隐性强依赖