将数据传递给父组件答案

【问题标题】：Pass data to parent component将数据传递给父组件
【发布时间】：2019-01-19 23:32:30
【问题描述】：

我有一个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' }
            }
        }
    }
}

现在在后端，我可以看到文件，以及包含字符串 Test.sendData 的参数。所以这一切都有效。然后我尝试用

替换字符串

return { sentData: this.sentData }

但它抱怨this.sentData 为空，即使我可以看到它存在。所以我认为这一定是因为理论上我在一个子组件（上传器）中，所以我必须需要从父组件获取数据。我试过了

return { sentData: $parent.sentData }

和

return { sentData: this.$parent.sentData }

没有成功，只是得到空值。所以我想知道如何从上传器组件中访问这些数据？

谢谢

【问题讨论】：

标签： vuejs2 vue-component

【解决方案1】：

options.query 方法中的 this 上下文并不真正引用 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>

【讨论】：