[Vue.js] [원스 UI] 페이지로 돌아갈 때 정보를 얻으려고 합니다.

이거 하기 전에 준비해 주세요. 아래 링크에 적어주세요.
이것
↓
https://qiita.com/sachiko-kame/items/dec61189b3de2e353106
제목이렇게 생각하는 여러분은 떳떳하지 못하다.
그것만 생각했어.
그냥 필기예요. 용서해 주세요.
: 좋아요!
네?지금 천사가'좋아요!'그는 나에게 말했다.그러니까 계속해.
Vue에서 template로 돌아올 때 값을 받을 수 있을까요?나는 못 받을 것 같아서 계속 고민했다.
그리고 지금은 One UI를 사용했습니다. "이렇게 하면 떼어낼 수 있을까? 떼어낼 수 있을까?"며칠 후, "아, 어떡하지?""아, 그렇구나"며칠 후, "아, 어떡하지?"
….자신이 전혀 기억량이 없다는 것을 깨달았을 때 qita에 기록이 없다고 적혀 있다.
참고로 이벤트를 사용했습니다.
여기 있습니다.링크입니다.
↓
https://ja.onsen.io/v2/guide/lifecycle.html
사용법이 아주 간단하다
Hello.vue

<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>

의
Hello.vue

@show="show"

및
Hello.vue

show(){
      console.log('再び戻ってきたか');
    }

쓰면 돼.
이번에 Sample로 만든 게 있는데 한번 보세요.아, 강제 아니야

이 기술은 Hello입니다.vue.최초의 화면이라고 할 수 있죠. 다음 화면에서 돌아왔을 때 일지에
"너 또 돌아왔니?"
알고 있습니다.
나는 본래 github에게 "코드는github"라고 말하고 싶었지만,github에서 나는 미니 응용 프로그램이 탄생할 수 있다고 생각한다.여기에 중요한 코드를 넣거나 사용하기 위해 필요한 코드를 넣는다.
하고 있는 일은요.
전환
• 다음 페이지에서 돌아가기
· 돌아올 때 기록해 두고(엄밀히 말하면 최초에도...) 코드로 조정할 수 있었으면 좋겠다고 생각했어요.
App.vue

<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>

Hello.vue

<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>

Sample.vue

<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>

필요 없을 수도 있으니 코드를 좀 설명해 주세요.
App.vue

<v-ons-navigator swipeable
  :page-stack="pageStack"
  @push-page="pageStack.push($event)"
></v-ons-navigator>

이것은 페이지를 저장하는 부품인 "navigator"라고 생각하시기 바랍니다.
하지만 한 페이지의 ":page-stack"을 넣어야 합니다.참고로 페이지-stack은 원래 반드시 사용해야 하는 변수라고 생각합니다.거기에 데이터'페이지스택'이 들어갔대.
추가된 것은 지금 맨 위에 있다.그러니까 지금 보이는 페이지가
App.vue

<script>
import hello from './Hello.vue';

export default {
  data(){
    return {
      pageStack: [hello]
    }
  }
}
</script>

맨 위에 한 페이지만 올리고 싶어서 넣은 느낌이에요."Hello"의 페이지를 import로 하고 "navigator"의 첫 페이지로 합니다.
처음엔 헬로였어.안녕, 세상.아~ 넓어 보여요.
Hello.vue

@click="push"

원래 단추의 동작은 @click 를 받아들여서 함수로 push를 지정하는 느낌을 줍니다.
Hello.vue

methods: {
    push() {
      this.$emit('push-page', sample);
    },

여기는 방금push 함수의 내용입니다.
「.$emit('push-page', sample);」
의 쓰기 방법은'push 페이지'인데 함수 이름이고sample이 준 값이다.
참고로 이 $emit는 부모님의 뜻이고 이번에 한 말은 "App.vue"의push-page입니다.당신에게 맡긴 것은 Sample 페이지입니다.
App.vue

@push-page="pageStack.push($event)"

그나저나 부모님(App.vue)의push-page가 이 말입니다.
처리는 [pageStack.push($event)] 섹션입니다.
여기에도 함수만 쓰는 방법이 있지만 이번에는 범본이 직접 썼기 때문에 직접 사용한다.
준비된 배열 [pageStack]의 값 "sample"에 대한 처리를 추가합니다.
겸사겸사 말씀드리지만, 나머지 이야기는?하지만 아이의 요소부터 부모의 요소까지 이번처럼 행동할 때는 부모의 요소입니다

@push-page="<ここは処理を書いても関数のもの定義のみでも構わない>"

이렇게 쓰면 안 돼.
나는 자주 잊어버린다. "어? 왜 실행하지 않지?"그러니까
Sample.vue

<v-ons-toolbar>
  <div class="left">
    <v-ons-back-button>Back</v-ons-back-button>
  </div>
</v-ons-toolbar>

여기'toolbar'위에 보이는 벨트예요.
'ons-back-button'은 OnenUI에 원래 정의된 리베이트입니다.이렇게 하면 페이지Stack에 마음대로 넣는 양을 줄일 수 있다.
아니오, 편해요.
참고로''는 부품의 느낌입니다.
에서 정의한 ""는 Onene UI 페이지의 정의입니다.여기에 다양한 것을 넣는다.이런 느린 느낌으로 이해할 수 있다면 그렇게 고통스럽지 않을지도 몰라.
Onsen UI 문서는 매우 부드럽고 섬세하게 쓰여 있으니 한번 보세요.
아, 강제 아니에요.
이런 느낌, 이런 느낌 자신이 쓴 코드가 완성된다.편하네.