怎么封装一个上传组件，传一个v-model；上传完把url直接emit到这个v-model上

在Vue.js中，封装一个文件上传组件通常会涉及到数据绑定和事件处理。这里是一个基本步骤：

1. **创建组件**:
首先，创建一个新的Vue组件，比如`UploadFile.vue`:

<template>
  <div class="upload-component">
    <input type="file" @change="handleFileChange" ref="uploadInput" v-model="fileUrl" :accept="acceptType" />
    <span v-if="fileUrl">已选择文件: {{ fileUrl }}</span>
    <button @click="submitUpload">上传</button>
  </div>
</template>

<script>
export default {
  props: {
    acceptType: {
      // 设置文件接受类型
      type: String,
      required: false,
      default: '*/*'
    },
    vModel: {
      // 接收外部传递的v-model值，并通过ref触发事件更新
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileUrl: '',
    };
  },
  methods: {
    handleFileChange(e) {
      this.fileUrl = URL.createObjectURL(e.target.files[0]);
    },
    submitUpload() {
      // 这里可以添加实际的文件上传功能，如axios、fetch等
      // 假设上传成功，将新的url emit出去
      if (this.fileUrl) {
        this.$emit('update:vModel', this.fileUrl); // 更新v-model的值
      }
    },
  },
};
</script>

2. **在父组件中使用**:
然后在需要使用此组件的地方，像这样使用并监听它的变化：

<template>
  <div>
    <UploadFile :accept-type="acceptType" v-model="selectedImageUrl" />
    <img :src="selectedImageUrl" alt="图片" />
  </div>
</template>

<script>
import UploadFile from './components/UploadFile.vue';

export default {
  components: { UploadFile },
  data() {
    return {
      acceptType: 'image/*',
      selectedImageUrl: '', // 初始化v-model的默认值
    };
  },
};
</script>

当你选择文件或点击上传按钮后，`selectedImageUrl`就会自动更新。