Vue自定义组件中如何获取v-model的初始值？

要获取v-model的初始值，核心是利用v-model的语法糖规则：它默认会把父组件的绑定值传给子组件的value prop，同时监听子组件的input事件来更新自身值。针对你的upload-button组件，只需做以下修改：

1. 声明value prop #

在组件的props中添加value，接收v-model传递的初始值：

props: ['endpoint', 'value'],

2. 同步初始值到内部状态 #

将组件内部的filename初始值设为this.value（如果父组件没传初始值，就用默认提示文本）：

data(){
  return ({
    filename: this.value || 'filename...'
  })
},

3. 监听value变化，保持同步 #

添加watch监听value的变化，确保父组件更新v-model值时，组件内部的显示也同步更新：

watch: {
  value(newVal) {
    this.filename = newVal || 'filename...';
  }
},

修改后的完整组件代码 #

Vue.component('upload-button', {
  props: ['endpoint', 'value'],
  data(){
    return ({
      filename: this.value || 'filename...'
    })
  },
  watch: {
    value(newVal) {
      this.filename = newVal || 'filename...';
    }
  },
  template: `<label class="upload-button">
    <input type="file" accept="image/*" @change="fileSelected" hidden>
    <div class="btn btn--outline text--red">
      Choose file
    </div>
    <span>
      {{ filename }}
    </span>
  </label>`,
  methods: {
    fileSelected(e){
      this.filename = e.target.files[0].name;

      var formData = new FormData();
      formData.append('file', e.target.files[0])

      axios.post(this.endpoint, formData).then(
        res=>{
          if ( res.data.status ){
            this.filename = res.data.fileId;
            this.emitVModel(res.data.fileId);
          }
        }
      )
    },
    emitVModel(id){
      this.$emit('input', id)
    }
  }
})

补充说明 #

• 父组件使用时，直接通过v-model="yourFileId"绑定值即可，组件初始化会自动显示这个初始值
• 上传成功后，你通过$emit('input', id)更新父组件的v-model值，这部分逻辑无需改动

内容的提问来源于stack exchange，提问作者blackcityhenry