Vue简单文件上传组件封装

最近在做项目,好几个页面都有文件上传,为了避免代码重复拷贝,提高维护效率,决定封装成组件调用。

Vue简单文件上传组件封装

如上图所示我将上传照片和文档当成一组来处理。

1.首先在项目中的components文件夹下新建uploadFile.vue文件;

Vue简单文件上传组件封装

Vue简单文件上传组件封装

2.在需要引入组件的文件中引入组件,并在components中定义组件;

Vue简单文件上传组件封装

3.如果需要传递参数给子组件则在标签中定义,如上图中 <upload-file :step="step1"></upload-file>

4.子组件接收父组件传的值是通过props接收;

Vue简单文件上传组件封装

以上为工作简单总结方便以后回顾,写的不好还望多多指教!