vuejs2 - Onsen + VueJS:从子组件回调(使用onsNavigatorProps)
问题描述
根据此处的文档
如果页面 A 推送页面 B,它可以发送一个函数作为修改页面 A 的上下文的道具或数据。这样,每当我们想从页面 B 向页面 A 发送任何内容时,后者只需要调用该函数并传递一些参数:
// Page A
this.$emit('push-page', {
extends: pageB,
onsNavigatorProps: {
passDataBack(data) {
this.dataFromPageB = data;
}
}
});
我正在遵循这个想法。做类似的事情this.$store.commit
我想推送AddItemPage
并将返回的值复制到this.items
//Parent.vue
pushAddItemPage() {
this.$store.commit('navigator/push', {
extends: AddItemPage,
data() {
return {
toolbarInfo: {
backLabel: this.$t('Page'),
title: this.$t('Add Item')
}
}
},
onsNavigatorProps: {
passDataBack(data) {
this.items = data.splice() //***this*** is undefined here
}
}
})
},
//AddItemPage.vue
...
submitChanges()
{
this.$attrs.passDataBack(this, ['abc', 'xyz']) // passDataBack() is called, no issues.
},
...
唯一的问题是这在回调函数中不可用。
所以我做不到this.items = data.splice()
解决方案
当前上下文可通过箭头运算符获得。
正确版本:
onsNavigatorProps: {
passDataBack: (data) => {
this.items = data.splice()
}
}
推荐阅读
- spring - JPA:映射地图
> - android - 设备显示屏上的 Espresso UI 测试表情符号
- python-3.x - 如何使用 itertools 组合功能创建列表列表?
- javascript - 表单输入字段之间的计算
- php - mysqli::__construct(): (HY000/1045): Access denied for user 'username'@'localhost' (使用密码: YES)
- c# - 无法修改“ParticleSystem.shape”的返回值,因为它不是变量
- periscope - 用于检查 Periscope 用户是否在线的 API
- javascript - $ 未定义,即使脚本在 Webpack 包之后
- python - 如何获取带有实体的格式化文本?
- java - 如何创建一个循环攻击敌人直到敌人死亡