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

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...