将数据传递给父组件
将数据传递给父组件
提问于 2019-01-20 07: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的参数sentData。所以这一切都是可行的。然后，我尝试将字符串替换为
return { sentData: this.sentData }但是它抱怨this.sentData是空的，尽管我可以看到它存在。所以我想这一定是因为理论上我在一个子组件(上传器)中，所以我必须从父组件中获取数据。我试过了
return { sentData: $parent.sentData }和
return { sentData: this.$parent.sentData }没有成功，只能得到空值。所以我想知道如何从uploader组件中访问这些数据？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-20 12:11:28
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54272270
复制相关文章
相似问题
腾讯云开发者
