父组件通过ref多次调用同一子组件方法，只有最后一次生效

问题描述

在项目中写了一个公共组件，在里面定义了一个方法，父组件通过 $refs调用该方法，当父组件只引用一次该子组件时，通过$refs可以正常调用子组件的方法，但是当父组件多次引用子组件时，只有最后一次引用的时候，子组件方法可调用，前面的都失效了

看一下代码接口

//child.vue子组件
//定义了一个方法,清空输入框的值
clearLinkageInput() {
    this.jdValue = "";
    this.sqValue = "";
    this.wgValue = "";
},
//父组件
//第一次引用
<child ref="child" ></child>
//第二次引用
<child ref="child" ></child>

<button @click="cleartInput" ></button>

//通过ref调用子组件方法
cleartInput(){
  this.$refs.child.clearLinkageInput()
}

结果：点击按钮，可以触发子组件的方法，也没有报错，但是，第二次引用的地方输入框的值清空，第一次引用的地方，输入框的值没有改变，还想了半天问题出在哪里？？？

官网看到了这里vue.js

企业微信截图_15850387064400.png

ref如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例,所以ref不要使用相同的即使引用的是同一个子组件，要不然就不能获取到唯一的DOM或者指向子组件的实例