0530

🐥 Provide, inject

형제컴포넌트인 HelloWorld와 Brother에서 count라는 데이터를 연동시켜보려고 합니다. 이 때 porvide와 inject를 이용할 수 있습니다.

1. 공통적으로 사용할 data를 App.vue에 작성

Brother.vue와 HelloWorld.vue 모두에서 데이터를 사용할 수 있도록 조상요소에 데이터를 정의합니다.

App.vue

<template>
  <HelloWorld />
  <Brother />
</template>

<script>
import HelloWorld from '~/components/HelloWorld.vue'
import Brother from '~/components/Brother.vue'


export default {
  components: {
    HelloWorld,
    Brother
  },
  data() {
    return {
      count: 0
    }
  }
}

</script>

2. App.vue(조상)에 provide를 정의합니다.

App.vue

  provide() {
    return {
      count: 0
    }
  },

3. 자식요소에 inject를 정의합니다.

HelloWorld.vue

<template>
  <h1>{{ count }}</h1>
  <button @click="count += 1">
    INCREASE
  </button>
</template>

<script>
export default {
  inject: ['count']
}
</script>

4. 반응성부여

💡computed함수

• Povide, inject로 제공되는 데이터의 경우 반응성이 지원되지 않는다는 단점이 있습니다. 따라서 computed함수를 통해 반응성을 넣어줘야합니다.
• computed함수에서 리턴되는 값이 반응성데이터가 되게 됩니다.

App.vue

<script>
import {computed} from 'vue'✅
import HelloWorld from '~/components/HelloWorld.vue'
import Brother from '~/components/Brother.vue'


export default {
  components: {
    HelloWorld,
    Brother
  },
  provide() {
    return {
      count: computed(() => {
        return 0
      })
    }
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

만약, count가 0이 아니라 2라서 그 데이터를 가져가 사용하고 싶다면 아래와 같이 작성을 해주면 됩니다.

  provide() {
    return {
      count: computed(() => this.count✅)
    }
  },
  data() {
    return {
      count: 2✅
    }
  }

5. 수정권한이 있는 함수 생성 provide로 제공

App.vue

provide() {
  return {
    count: computed(() => this.count),
    increase: this.increase
  }
},
  data() {
    return {
      count: 0
    }
  },
    methods: {
      increase() {
        this.count += 1
      }
    }

HelloWorld.vue

<template>
  <h1>{{ count }}</h1>
  <button @click="increase">
    INCREASE
  </button>
</template>

<script>
export default {
  inject: ['count', 'increase']
}
</script>