index.vue

@@ -0,0 +1,82 @@
+<template>
+  <!-- 组件根容器 -->
+  <div>
+    <!-- 引入本地文件上传子组件，使用 v-model 双向绑定文件地址，通过 props 传递文件类型、提示信息和列表类型 -->
+    <file-upload-local v-model="fileUrl" :accept="accept" :tips="tips" :list-type="listType" />
+  </div>
+</template>
+
+<script>
+// 导入本地文件上传组件
+import FileUploadLocal from './local'
+
+export default {
+  // 组件名称
+  name: 'FileUpload',
+  // 注册子组件
+  components: { FileUploadLocal },
+  // 组件接收的属性
+  props: {
+    // 父组件传递的文件地址
+    value: String,
+    // 允许上传的文件类型，默认支持所有类型
+    accept: {
+      type: String,
+      default: '*'
+    },
+    // 提示信息
+    tips: String,
+    // 上传列表的显示类型，默认显示为图片类型
+    listType: {
+      type: String,
+      default: 'picture'
+    }
+  },
+  // 组件的数据
+  data() {
+    return {
+      // 本地维护的文件地址
+      fileUrl: ''
+    }
+  },
+
+  // 监听器
+  watch: {
+    // 检测父组件传递的 value 属性变化
+    value: {
+      handler() {
+        // 当 value 变化时，调用 fillValue 方法更新本地文件地址
+        this.fillValue()
+      }
+    },
+
+    // 检测本地文件地址变化
+    fileUrl: {
+      handler() {
+        // 当本地文件地址变化时，触发 input 事件，将新的文件地址传递给父组件
+        this.$emit('input', this.fileUrl)
+      }
+    }
+  },
+  // 组件挂载完成后的钩子函数
+  mounted() {
+
+  },
+
+  // 组件创建完成后的钩子函数
+  created() {
+    // 初始化时调用 fillValue 方法，将父组件传递的文件地址赋值给本地变量
+    this.fillValue()
+  },
+
+  // 组件的方法
+  methods: {
+    /**
+     * 将父组件传递的 value 属性值赋值给本地的 fileUrl
+     */
+    fillValue() {
+      this.fileUrl = this.value
+    }
+  }
+}
+</script>