开发者问题收集

将数据传递给父组件

2019-01-19
35

我有一个 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 的参数 sentData。所以这一切都正常。然后我尝试用

return { sentData: this.sentData }

替换字符串,但它抱怨 this.sentData 为空,即使我可以看到它存在。所以我认为这一定是因为我理论上在子组件(上传器)内,所以我必须从父级获取数据。我试过

return { sentData: $parent.sentData }

return { sentData: this.$parent.sentData }

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

谢谢

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>
Yom T.
2019-01-20