악역영애의 개발일지

간단한건데 this 가 confirm 안에 들어간다거나 다른 function 안에서 사용되면 인식이 안된다.

let self = this;

그럴땐 별도 변수에 this 담아서 사용!

자식이 부모에게 값전달

부모

<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: {
   
  }
}

얘가 보이게될것임