3페이지 연동
페이지 레이아웃
<![CDATA[
<template>
<v-row justify="center" align="center">
<!-- 1페이지 메인 -->
<v-col cols="12" sm="8" md="6">
<v-card>
<div>{{ textField }}</div> // 인풋에 입력한 글자가 보여주는 구간
<v-text-field v-model="textField" label="글자를 입력하시오"></v-text-field>
<v-btn @click="changeText2" color="primary">글자바꾸기</v-btn>
<v-btn @click="showSub" color="primary">sub-2 보기</v-btn>
<v-btn @click="hideSub" color="primary">sub-2 숨기기</v-btn>
</v-card>
</v-col>
<!-- //1페이지 메인 -->
<!-- 2페이지 import -->
<v-col v-if="!isShowSub">
<Inspire ref="childRef" @show-sub="showSub" @parent-fun="parentFun"
:textField="textField" />
</v-col>
<!-- //2페이지 import -->
<!-- 3페이지 import -->
<v-col v-else>
<Sub @hide-sub="hideSub" />
</v-col>
<!-- //3페이지 import -->
</v-row>
</template>
]]>
1 페이지 스크립트
<![CDATA[
<script>
import Inspire from './aaa/inspire'
import Sub from './aaa/sub'
export default {
name: 'IndexPage',
components: {
Inspire,
Sub,
},
data() {
return {
textField: '',
isShowSub: false,
}
},
methods: {
aaaa() {
console.log(1111)
},
changeText2() {
this.$refs.childRef.changeText('부모에서 설정한 글자 불러 오기')
},
parentFun() {
console.log(2222)
this.textField = ''
},
showSub() {
console.log(3333)
this.isShowSub = true
},
hideSub() {
this.isShowSub = false
},
},
}
</script>
]]>
2페이지 소스
<![CDATA[
<template>
<v-row>
<v-col class="text-center">
<h1>{{ textField }}</h1>
<img src="/v.png" alt="Vuetify.js" class="mb-5" />
<blockquote class="blockquote">
{{ text }}
<footer>
<small>
<em>—John Johnson</em>
</small>
</footer>
</blockquote>
</v-col>
<v-btn @click="changeText('내자신 글자 불러 오기')">바껴라</v-btn>
<v-btn @click="removeText">지워라</v-btn>
<v-btn @click="goSub">Sub로 가기</v-btn>
</v-row>
</template>
<script>
export default {
name: 'InspirePage',
data() {
return {
text: 'First, solve the problem. Then, write the code.',
}
},
props: ['textField'],
methods: {
changeText(text) {
this.text = text
},
removeText() {
this.$emit('parent-fun')
},
goSub() {
this.$emit('show-sub')
},
},
}
</script>
]]>
3페이지 소스
<![CDATA[
<template>
<div>
VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
<div>
<v-btn @click="goInspire">Inspire로 돌아가기</v-btn>
</div>
</div>
</template>
<script>
export default {
name: 'SubPage',
methods: {
goInspire() {
this.$emit('hide-sub')
},
},
}
</script>
]]>