Vue简单文件上传组件封装

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

Vue简单文件上传组件封装_第1张图片

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

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

Vue简单文件上传组件封装_第2张图片

Vue简单文件上传组件封装_第3张图片

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

Vue简单文件上传组件封装_第4张图片

3.如果需要传递参数给子组件则在标签中定义,如上图中 ,其中step1就是需要传递的值。

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

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

你可能感兴趣的:(小结)