これやる以前の準備は以下リンクに書かせていただいてます。
これ
↓
https://qiita.com/sachiko-kame/items/dec61189b3de2e353106
タイトルで『はっ？』と思った方ごめんなさい。
これしか思いつきませんでした。
メモ程度なので許してください。
:いいよ！
あっ。今天使が『いいよ！』って言ってくれた。なので続けます。
Vueではtemplateで再び戻って来た時値取れるのかな？って悩んでいて、取れなさそうって思ったんですよ。
で、今Onse UI使ってたから「これで取れるかな？取れた」ってなって何日か後、「あ、どうやるんだっけ？」「あ、こうだ」でまた何日か後、「あ、どうやるんだっけ？」
…。記憶量皆無だと気付いた時qiitaにメモしとかないとって書いているわけです。
ちなみに使うのは、イベントというやつです。
これです。これリンクです。
↓
https://ja.onsen.io/v2/guide/lifecycle.html
使い方はとても簡単で、
<template>
<v-ons-page @show="show">
<v-ons-toolbar>
<div class="center">(╭☞•́⍛•̀)╭☞</div>
</v-ons-toolbar>
<p>こんにちは(╭☞•́⍛•̀)╭☞右のボタンを押してね❤️<span><v-ons-button @click="push" style="margin: 6px 0">ボタン</v-ons-button></span></p>
</v-ons-page>
</template>
<script>
import sample from './Sample.vue';
export default {
data() {
return {
}
},
methods: {
push() {
this.$emit('push-page', sample);
},
show(){
console.log('再び戻ってきたか');
}
}
}
</script>
の、
@show="show"
と
show(){
console.log('再び戻ってきたか');
}
を書けばできちゃいます。
今回のSampleとして作ったものがあるので見ていってください。あ、強制ではないです
この記述はHello.vue。いわば最初の画面なのですが、次の画面から戻って来た時に、ログで
「再び戻ってきたか」
ってでてるのがわかります。
で「codeはgithub」にって言おうと思ったのですが、githubで私のミニミニアプリでうまるのは…な気がしたため。ここに大事なというかこれ使う為に必要だと思うコード置いておきます。
行っていることは、
・遷移
・次のページから戻ってくる
・戻って来た時にログだす(厳密には最初も出ていますが…)調整はコードで行っていただければと思います。
<template>
<v-ons-navigator swipeable
:page-stack="pageStack"
@push-page="pageStack.push($event)"
></v-ons-navigator>
</template>
<script>
import hello from './Hello.vue';
export default {
data(){
return {
pageStack: [hello]
}
}
}
</script>
<template>
<v-ons-page @show="show">
<v-ons-toolbar>
<div class="center">(╭☞•́⍛•̀)╭☞</div>
</v-ons-toolbar>
<p>こんにちは(╭☞•́⍛•̀)╭☞右のボタンを押してね❤️<span><v-ons-button @click="push" style="margin: 6px 0">ボタン</v-ons-button></span></p>
</v-ons-page>
</template>
<script>
import sample from './Sample.vue';
export default {
methods: {
push() {
this.$emit('push-page', sample);
},
show(){
console.log('再び戻ってきたか');
}
}
}
</script>
<template>
<v-ons-page>
<v-ons-toolbar>
<div class="left">
<v-ons-back-button>Back</v-ons-back-button>
</div>
<div class="center">Sample</div>
</v-ons-toolbar>
<p>ここは典型的なSampleページです。┣¨ ୧(๑ ⁼̴̀ᐜ⁼̴́๑)૭ ヤ</p>
</v-ons-page>
</template>
いらないかもですがコードの説明を少しだけさせてください。
<v-ons-navigator swipeable
:page-stack="pageStack"
@push-page="pageStack.push($event)"
></v-ons-navigator>
これはページを格納しておく部品的な「navigator」的なものがあると思っていただければと思います。
でその中にはページを入れておく「:page-stack」が必要なのです。ちなみに:page-stackは元々使う必須の変数だと思っていただければと思います。そこにdataの"pageStack"を入れているということです。
追加されているものが今一番上にあります。つまり今見えているページです。
<script>
import hello from './Hello.vue';
export default {
data(){
return {
pageStack: [hello]
}
}
}
</script>
は、一番上にとりあえずページ入れときたいから入れている感じです。「hello」のページをimportして「navigator」の最初のページとしています。
最初はHello。こんにちは、世界。あ〜なんか広い感じです。
@click="push"
はもともとボタンのアクション受け取る「@click」があって、そこに関数として「push」を指定しますって感じです。
methods: {
push() {
this.$emit('push-page', sample);
},
ここは先ほどのpush関数の中身になります。
「.$emit('push-page', sample);」
という書き方は'push-page'のところが関数名で、sampleが渡す値です。
ちなみにこの$emitは親のという意味で、今回で言えば「App.vue」のpush-pageを行ってと言っています。渡しているのはsampleページです。
@push-page="pageStack.push($event)"
ちなみに親(App.vue)のpush-pageはここの文です。
行う処理は[pageStack.push($event)]の部分です。
ここに関数のみ書く方法もありますが今回はお手本が直書きだったのでそのまま使っています。
用意している配列[pageStack]に来た値「sample」を追加という処理です。
ちなみに余談？ですが、子要素から親要素、今回のような感じでアクション行うときは親要素で、
@push-page="<ここは処理を書いても関数のもの定義のみでも構わない>"
のように書いとかないといけないのです。
私は、これよく忘れて、「あれ？なんで実行されないの？」ってなったりするのでお話してみました。
<v-ons-toolbar>
<div class="left">
<v-ons-back-button>Back</v-ons-back-button>
</div>
</v-ons-toolbar>
ここの「toolbar」は上に表示されている帯で、
「ons-back-button」はOnsen UIでもともと定義されているバックボタンです。これで勝手にpageStackに入れといたのを減らしてくれるのです。
いやいや便利ですね。
ちなみに、「<template></template>」は一つの部品的な感じでとらえてくれればと思います。
で、その中に定義されている「<v-ons-page></v-ons-page>」はOnsen UIのページの定義。ここの中に色々入れていく。みたいなゆるい感じでとらえてくれればそんなに苦しくないかもしれません。
Onsen UIのドキュメントはとても優しく、丁寧に書かれているので一度みてみてください。
あ、強制ではないです。
という感じで、こんか感じのものが自分で書くコードこれだけでできてしまうのです。便利ですね。