Vue의 컴포넌트 심화2(이벤트/ 데이터 전달)

부모 컴포넌트에서 자식 컴포넌트의 이벤트 발생시키기

1. 자식 컴포넌트에서 사용할 메서드를 정의한다.

2. 자식 컴포넌트 태그에서 ref를 정의한다.

• 자식 컴포넌트의 태그에 ref를 정의해야 부모 컴포넌트에서 해당 태그에 접근이 가능하기 때문에 ref를 정의해야 한다.

<!-- 자식 컴포넌트 -->

<template>
  <button type="button" v-on:click="childFunc" ref="btn">click</button>
</template>

<script>
export default {
  methods: {
    childFunc() {
      console.log("부모 컴포넌트에서 발생시킨 이벤트");
    },
  },
};
</script>

<style></style>

 

3. 부모 컴포넌트에서 자식 컴포넌트 전체의 ref를 정의한다.

• 자식 컴포넌트에서 ref를 정의한 것과 같은 이유이며, $ref를 통해 해당 ref에 접근할 수 있다.
• 해당 ref에 접근을 했다면 접근한 태그에 정해진 메서드를 .[메서드]로 접근을 해서 자식 컴포넌트 이벤트를 발생시킬 수 있다.

<!-- 부모 컴포넌트 -->

<template>
  <child-component ref="child_component" />
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },

  mounted() {
    this.$refs.child_component.$refs.btn.click();
  },
</script>

 

 

부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 직접 변경하기

1. 메서드가 아닌 데이터 값을 변경하는 것이기 때문에 자식 컴포넌트에서 data()에 의해 상태 값을 먼저 설정해줘야 한다.

<!-- 자식 컴포넌트 -->

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
    };
  },
};
</script>

 

2. 부모 컴포넌트에서는 자식 컴포넌트에 대한 ref를 설정해줘야 한다.(그래야 접근 가능)

3. 이후 부모 컴포넌트에서 자식 컴포넌트 데이터를 변경하는 메서드를 작성해주면 된다.

4. 아래의 코드에서는 버튼이 눌렸을 때 changeChildData 메서드가 실행되고, 자식 컴포넌트의 데이터가 '변경완료'로 바뀌게 된다.

<!-- 부모 컴포넌트 -->

<template>
  <child-component-3 ref="child_component3" />
  <button type="button" @click="changeChildData">change</button>
</template>

<script>
import ChildComponent3 from "./ChildComponent3.vue";
export default {
  components: {
    ChildComponent3,
  },

  methods: {
    changeChildData() {
      this.$refs.child_component3.msg = "변경완료";
    },
  },
};
</script>

 

 

자식 컴포넌트에서 부모 컴포넌트로 이벤트/데이터 전달하기(커스텀 이벤트)

1. emit을 사용해서 이벤트를 전달하는 방식이다.

2. 자식 컴포넌트의 mount 단계에서 부모 컴포넌트에게 `this.$emit( "식별키워드", [전달할 내용]) 형식으로 코드를 작성하면 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있다.

<!-- 자식 컴포넌트 -->

<template>
  <div>자식 컴포넌트에서 부모 컴포넌트로 이벤트/ 데이터 전달하기</div>
</template>
<script>
export default {
  data() {
    return {
      msg: "자식 컴포넌트로부터 보내는 메시지",
    };
  },

  mounted() {
    this.$emit("send-message", this.msg);
  },
};
</script>

 

3. 부모 컴포넌트에서는 `@send-message="sendMessage"`와 같이 자식 컴포넌트에서 보내준 식별 키워드와 부모 컴포넌트에서 정의한 메서드를 대입시키면, 메서드의 매개변수로 자식 컴포넌트에서 전달한 데이터를 사용할 수 있다.

<!-- 부모 컴포넌트 -->

<template>
  <child-component-4 @send-message="sendMessage" />
</template>

<script>
import ChildComponent4 from "./ChildComponent4.vue";
export default {
  components: {
    ChildComponent4,
  },

  methods: {
    sendMessage(data) {
      console.log(data);
    },
  },


};
</script>

 

 

부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 동기화하기

1. 부모 컴포넌트에서 computed를 이용해 자식 컴포넌트에서 정의한 데이터 옵션 값의 변경사항을 동기화할 수 있다.

2. 자식 컴포넌트의 변화를 감지하기 때문에 $emit을 통해 변경 데이터를 전송하지 않아도 된다.

<!-- 자식 컴포넌트 -->

<template>
  <button type="button" @click="childFunc" ref="btn">
    부모 컴포넌트에서 자식 컴포넌트 데이터 동기화
  </button>
</template>

<script>
export default {
  data() {
    return {
      msg: "message",
    };
  },

  methods: {
    childFunc() {
      this.msg = "changed message";
    },
  },
};
</script>

 

<!-- 부모 컴포넌트 -->

<template>
  <button type="button" @click="checkChild">자식 컴포넌트 데이터 조회</button>
  <child-component-5 ref="child_component5" />
</template>

<script>
import ChildComponent5 from "./ChildComponent5.vue";
export default {
  components: {
    ChildComponent5,
  },
  
  methods: {
    checkChild() {
      alert(this.msg);
    },
  },

  computed: {
    msg() {
      return this.$refs.child_component5.msg;
    },
  },
};
</script>