Vue：ref和this.$refs的使用

官方文档的定义：

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。

昨天遇到这样一个问题，产品要在页面上做一个上传excel的功能（虽然我也不知道为什么要这么设计），上传组件是另一个项目组写的JobUI，他们做了一个小叉按钮来删除附件，但是没有做监听，我试了下在上传的方法里可以清除附件upfile对象，却无法改变显示。

于是我查了下他们的源代码。

<div class='file_list' :class="error" :title="title" v-if="!filelist && filename && singleClose">
			<i class=' ' :class="fileIcon"></i>
			<span :title='filename'>{{filename}}</span>
            <i class='iconfont iconcancel' @click='closesingle()'></i>
</div>

      closesingle(){
          this.singleClose = false
          this.$emit('input',{})
          this.$emit('deletefile',this.filename)
      },

这个closesingle()应该就是删除方法，第一行是上传开关，第二行是清空显示，第三行是删除对象。
现在解决方案出来了，先用ref=“upload” 为upload组件赋予一个引用，注册到this.$ref中。

<div class="upload">
    <upload :uptype='uploadTypeList' v-model='upfile' ref="upload"> 上传学员证书</upload>
</div>

然后在上传方法里调用。

	   //清空选择文件
	   this.$refs.upload.closesingle();

这样就实现了小叉按钮的删除功能。