代码之家 › 专栏 › 技术社区 › user1

Onsen+VueJS:从子组件回调(使用OnNavigatorProps)

onsen-ui2 vuejs2

2

user1 · 技术社区 · 8 年前

根据文件 here

如果页面A推送页面B,它可以发送一个函数作为道具或数据,将页面修改为上下文。这样,每当我们想从页面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()

1 回复 | 直到 8 年前

1

user1 8 年前

当前上下文可用于箭头运算符。

正确版本:

onsNavigatorProps: {
    passDataBack: (data) => {
      this.items = data.splice()                
    }
}