Vue.js (4)

컴포넌트로 구현하는 웹 페이지의 구성과 계층구조

출처 : https://dahye-jeong.gitbook.io/vue-js/vuejs/2019-10-15-component

pinia 를 통해 여러 정보를 공유한다.

 

ref 값을 변경할 때는 변수명.value 값을 변경하면 된다. reactive는 객체의 속성 값을 변경하면 된다.

부모에서는 핸들러를 통해 미리 구현해놨다가 emit이라는 함수에 의해서 실제로 이벤트가 발생했다할때 자식에서 발생하는 이벤트가 처리되도록 할 수 있다.

 

Vue 3의 컴포넌트 간의 통신 방법 : (1) props 부모에서 자식으로 (2) emit 자식이 부모에게 (3) v-model (4) slots (5) provide/inject (6) pinia

 

toRefs : 반응성은 그대로 가져가고 싶을 때.. 반응성 객체로 만들어 처리하겠다 라는 뜻..

 

 

자식 컴포넌트.

<template>
  <button type="button" @click="childFunc" ref="btn">자식버튼</button>
</template>
<script setup>
const childFunc = function () {
  window.alert('자식 컴포넌트의 버튼태그에서 발생된 클릭이벤트!!');
}
</script>

부모 컴퍼넌트에서 자식 컴포넌트로 직접 액세스하겠다할 때 $refs를 쓴다. $가 붙어있으면 자동으로 생성되는 객체.

$refs.child1이라고 접근한다. 아래는 부모 컴포넌트.

<template>
  <button @mouseover="sendMessage">부모버튼</button>
  <child-component ref="child1" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  methods: {
    sendMessage: function () {
      alert("child1이라는 자식 컴포넌트의 버튼에 클릭 이벤트를 트리거하겠습니다.");
      this.$refs.child1.$refs.btn.click();  // 자식 DOM 객체에 이벤트 발생      
    }
  }
};

this.$refs.child1.$refs.btn.click(); 이 코드는 child-component에서 ref가 child1이므로 this.$refs.child1이런식으로 접근한 후에 child1이라는 자식객체의 ref의 btn이 클릭되도록하는 코드다. 해당 태그에는 반드시 ref가 있어야 찾아갈 수 있다.

 

<template>
  <child-component2  ref="child2">
    이건 slot 기능 테스트용 컨텐트~~
  </child-component2>
</template>

이런식으로 자식 객체로 넘겨줄수 있다. 위 코드는 부모 컨포넌트에서 쓰인거

<template>
  <h3>자식컴포넌트</h3>
  <slot></slot>
</template>

자식 컴포넌트에서 이런식으로 넣고 싶은 자리에 slot을 작성할 수도 있다. 슬롯은 템플릿 조각을 자식 컴포넌트에 전달하고 자식 컴포넌트가 자체 템플릿 내에서 전달된 템플릿 조각을 렌더링하도록 하는 기능.

 

출처 : https://vuejs.org/guide/components/slots.html

 

부모 컴포넌트에서

mounted() {
    this.$refs.child2.callFromParent();
  }

이런식으로 자식 컴포넌트에 정의된 함수를 호출할 수 있다.

 

<script>
export default {
  data() {
    return {
      msg: 'Option API를 사용한 자식 컴포넌트로부터 보내는 메시지'
    };
  },
  mounted() {
    this.$emit('send-message', this.msg)
  }
}
</script>

이런식으로 Option API 방식으로 메세지를 자식 컴포넌트에서 작성하고 부모 컴포넌트로 보낼 수 있다. 발생할 이벤트 이름, 전달할 메세지를 아규먼트로 주면 된다. 

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

부모 컴포넌트에서 템플릿에 이런식으로 작성한 후에(send-message라는 이벤트가 발생하면 sendMessage라는 메서드를 호출하도록 한다라는 뜻. 여기서 child-component-option은 자식 컴포넌트 이름..)

methods: {
    sendMessage(data) {
      console.log("@@ : " + data);
    }
  }

스크립트 부분에서 이런식으로 작성하면 전달된 메세지가 콘솔창에서 보이게 된다.

 

Composition API를 사용한다면 자식 컴포넌트의 스크립트 부분에서

import { onMounted } from 'vue'
export default {
  emits: ['send-message'],
  setup(props, context) {
    const msg = 'Composition API를 사용한 자식 컴포넌트로부터 보내는 메시지';
    const { emit } = context;
    onMounted(() => {
      emit('send-message', msg)
    })
  }
}

반드시 emits 라는 속성에 넣어주고, emit이라는 함수로 받아서 처리하게 된다. $emit은 프록시에 담긴 걸 다이렉트로 쓰는 방법이었다. 

 

script뒤에 setup속성을 줘서 구현한다면

<script setup>
import { onMounted, defineEmits } from 'vue';
const emit = defineEmits(["send-message"]);
const msg = 'Composition Setup API를 사용한 자식 컴포넌트로부터 보내는 메시지';
onMounted(() => {
  emit('send-message', msg)
})
</script>

defineEmits하면 이벤트를 발생시키는 함수를 리턴해준다. 여기서는 emit이라는 이름으로 받았다. 

 

provide와 inject

출처 : https://vuejs.org/guide/components/provide-inject.html