Передать данные в родительский компонент

Question

У меня есть router-link, который перемещается к одному из моих компонентов.Он также передает параметр, который затем устанавливается в моем компоненте

created() {
    this.sentData = this.$route.params.sentData;
} 

. Когда я перехожу на страницу, я могу распечатать отправленные данные, а также увидеть, что они установлены в моей консоли Vue.Так что это все хорошо.На этой странице я использую vue-simple-uploader .Просто очень простой компонент загрузки.Согласно документам, вы можете отправить параметр запроса вместе с файлом на сервер.Итак, в качестве простого теста я выполнил

data() {
    return {
        sentData: '',
        options: {
            //other stuff like target
            query:  function (uploaderFile, uploaderChunk) {
                return { sentData: 'Test' }
            }
        }
    }
}

Теперь в бэкэнде я могу увидеть файл, а также параметр sentData, который содержит строку Test.Так что все это работает.Затем я попытался заменить строку на

return { sentData: this.sentData }

Но он жалуется, что this.sentData равно нулю, хотя я вижу, что оно присутствует.Поэтому я подумал, что это должно быть потому, что я теоретически нахожусь в дочернем компоненте (загрузчик), поэтому мне нужно получить данные от родителя.Я пытался

return { sentData: $parent.sentData }

и

return { sentData: this.$parent.sentData }

безуспешно, просто получал нули.Поэтому мне было интересно, как я могу получить доступ к этим данным из компонента загрузки?

Спасибо

Answer 1

Контекст this внутри вашего метода options.query на самом деле не ссылается на экземпляр Vue, но на контекст самого метода, чтобы обойти это, вы можете назначить локальную переменную текущему экземпляру.

new Vue({
  el: '#app',

  created() {
    this.sentData = 'Some initial value';
  },

  data() {
    const vm = this;

    return {
      sentData: '',

      options: {
        query(uploaderFile, uploaderChunk) {
          return {
            sentData: vm.sentData
          }
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <span v-text="options.query().sentData"></span>
</div>