provide와 inject
1단계위인 부모Component가 아닌 고조할아버지Componennt와 고손자Component와의 데이터 통신방법을 알아보자

image
Footer를 들리지않고 직속으로 DeepChild에게 전달



provide

기본

Root.vue

provide("name", "chanYeong");

DeepChild.vue

const nameInDeepChild = inject("name");
<h1></h1>

관련유틸은 상위컴포넌트가 제공

자식이 상위데이터를 조종하는것보다는 관련된 기능함수를 부모가 제공해야한다

Root.vue

  const age = ref(15);
  const updateAge = () => age.value++;
  const ageUtil ={
    age,
    updateAge,
  }
  provide('age', {age, updateAge});//구조분해로 제공
  //provide('age', ageUtil);

DeepChild.vue

const obj = inject("age");
obj.updateAge(); //age가 올라간다

...

<h1>
  
</h1>

readonly를 사용하면 변화를 막을수 있음

Root.vue

//readonly사용
const count = ref(1);
const countUp = () => count.value = count.value+1;
provide('count', {count: readonly(count), countUp});

DeepChild.vue

  const countObj = inject("count");
  countObj.countUp();//안먹힘 readonly때문

  ...

  <h1>
    
  </h1>

이외에도 직접 Vue에다가 provide를 사용하여 데이터를 글로벌적으로 사용할수도있다.

참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “기본편”

소스코드 바로확인하기

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy