将数据传递给父组件
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