반응형
자식이 부모에게 값전달
부모
<template>
<AgreeContent v-if="obj.text=='agree'" @text-change-agree="agreeMethod"></AgreeContent>
<ExchangeContent v-if="obj.text=='exchange'"></ExchangeContent>
<br><hr>
<button v-on:click="obj.text= (obj.text=='agree'? 'exchange':'agree')"> click me! </button>
{{obj.text}}
</template>
<script>
import AgreeContent from "@/components/AgreeContent";
import ExchangeContent from "@/components/ExchangeContent";
export default {
name: 'App',
components: {
ExchangeContent,
AgreeContent
},
data() {
return {
obj: {
text: "agree"
}
}
},
methods: {
agreeMethod : function(text) {
this.obj.text = text;
}
}
}
</script>AgreeContent 라는 커스텀 엘리먼트는
obj.text == agree 일때 출력됨.
ExchangeContent 라는 커스텀 엘리먼트는
obj.text == exchange 일때 출력됨.
AgreeContent 한테 @text-change-agree 라는 key로 agreeMethod를 보냄
(카멜케이스 안먹힘!!!!!!!!!!!!!!!!!!!!!!!!!!! 꼭 - 포함해서 하도록!!!!!!!!!!!)
일단 기본적으로 obj.text == agree로 세팅되어있으므로 <AgreeContent> 컴포넌트만 출력될것임.
자식1 - AgreeContent
<template>
<h2>agree 컴포넌트 입니다</h2>
<p>agree~~~~</p>
<button @click="move">excange로 이동~</button>
</template>
<script>
export default {
name: "AgreeContent",
methods: {
move: function() {
this.$emit('text-change-agree', "exchange");
}
}
}AgreeContent 에서 버튼을 클릭하면 move 라는 메소드가 실행되고
move에서는 emit 을 통해서 text-change-agree 로 exchange를 보냄
이때 부모창에서 있는 text-change-agree로 들어와서
//부모창 메소드
agreeMethod : function(text) {
this.obj.text = text;
}이것을 실행하고 부모창의 obj.text == exchange 로 변환되면서
//부모창
<AgreeContent v-if="obj.text=='agree'" @textChangeAgree="agreeMethod"></AgreeContent>
<ExchangeContent v-if="obj.text=='exchange'"></ExchangeContent>AgreeContent 는 안보이고
ExchangeContent 가 보이게됨.
자식2 - ExchangeContent
<template>
<h2>Excange 컴포넌트 입니다</h2>
<p>Excange~~~~</p>
</template>
<script>
export default {
name: "ExcangeContent",
methods: {
}
}얘가 보이게될것임
728x90
'과거 게시글' 카테고리의 다른 글
| @MappedSuperClass @inherited @Embadded 상속정리 (0) | 2023.02.11 |
|---|---|
| function 안의 function 혹은 confirm 안의 this 불러오기 (0) | 2022.08.10 |
| 인스타그램 태그 검색하여 게시물 파이썬으로 크롤링하기 (0) | 2021.11.30 |
| > invalid source release: 11 프로젝트 빌드 안될 때 (0) | 2021.11.04 |
| mybatis 데이터 안넘어올때, resultMap 안먹힐 때 (1) | 2021.09.15 |
