如何在自定義組件中訪問 v-model

Question

我知道我們可以在 vue 自定義組件上使用 v-model 通過this.$emit(input, e.target.value)將值綁定到父組件。 有什么方法可以訪問具有初始值的 v-model 嗎？

我已經編寫了一個上傳按鈕組件。 上傳按鈕在文件更改時上傳文件，服務器返回一個新的文件名/文件ID。 並且該文件名 / 文件 ID 將使用 v-model 發送到父組件。

Vue.component('upload-button', {
  props: ['endpoint'],
  data(){
    return ({
      filename: '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(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 具有初始值）。 如何訪問現有的文件名/文件 ID。

Answer 1

您可以通過this.$attrs.value訪問 v-model。

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