OnsenUI+VueのNavigatorで次コンポーネントに値を渡す方法

Navigatorで次のコンポーネントを表示するときに値を渡したいのですがどのようにやればいいでしょうか。
ons-navigator.pushPage()を使うときは第2引数で値を渡せるのは知っていますが
v-ons-navigatorは:page-stackプロパティで指定した配列にpush()しているのでパラメータの渡し方がわかりません。

<template>
  <v-ons-navigator :page-stack="pageStack" @goNext="goNext()"></v-ons-navigator>
</template>

<script>
import FirstComponent from './first'
import NextComponent from './next'

export default {
  data () {
     return pageStack: [
        FirstComponent
     ]
  },
  methods: {
    // FirstComponentから this.$emit('goNext') を実行して画面遷移
    goNext () {
      // { title: 'Next Component' } を渡したい
      this.pageStack.push(NextComponent)
    }
  }
}
</script>

// 受け取り方がわからない...
<template>
  <div>{{ title }}</div>
</template>

<script>
export default {
  data () {
    return {
      title: 'この定義はいる？'
    }
  }
}
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

コンポーネントの継承を使うことで次の画面に値を渡すことができます。

js
1// App.vue
2
3<template>
4  <v-ons-navigator
5    :page-stack="pageStack"
6    @goNext="goNext"
7  >
8  </v-ons-navigator>
9</template>
10
11<script>
12import FirstComponent from './FirstComponent'
13
14export default {
15  data () {
16    return {
17      pageStack: [FirstComponent]
18    }
19  },
20  methods: {
21    goNext (page) {
22      this.pageStack.push(page)
23    }
24  }
25}
26</script>

js
1// FirstComponent.vue
2
3<template>
4  <v-ons-page>
5    <v-ons-toolbar>
6      <div class="center">First Component</div>
7    </v-ons-toolbar>
8
9    <div>
10      <v-ons-button @click="transition">Next</v-ons-button>
11    </div>
12  </v-ons-page>
13</template>
14
15<script>
16import SecondComponent from './SecondComponent'
17
18export default {
19  methods: {
20    transition () {
21      this.$emit('goNext', {  // SecondComponent を継承した物を goNext に渡す
22        extends: SecondComponent,
23        data () {
24          return {  // 渡したい値をセット
25            title: '２画面目のタイトル（継承して上書き）'
26          }
27        }
28      })
29    }
30  }
31}
32</script>

js
1<template>
2  <v-ons-page>
3    <v-ons-toolbar>
4      <div class="left">
5        <v-ons-back-button>Back</v-ons-back-button>
6      </div>
7      <div class="center">{{ title }}</div>
8    </v-ons-toolbar>
9
10    <p>{{ contents }}</p>
11  </v-ons-page>
12</template>
13
14<script>
15export default {
16  data () {
17    return {
18      title: '継承されて上書きされるはず',
19      contents: '継承前のデータが引き継がれるはず'
20    }
21  }
22}
23</script>