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' }
            }
        }
    }
}

现在在后端中，我可以看到文件以及包含字符串Test的参数sendData。所以这一切正常。然后，我尝试将字符串替换为

return { sentData: this.sentData }

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

return { sentData: $parent.sentData }

和

return { sentData: this.$parent.sentData }

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

谢谢

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>

将数据传递到父组件

1 个答案: