[Vue3 + typescript] provide, inject

VUE.JS 목록

부모, 자식 콤포넌트간 데이터 공유를 위하여 사용함

 

parentComponent.vue

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  name: 'ParentComponent',
  components: { ChildComponent },
  setup () {
    const text = ref('hello')
    
    // provide 등록
    provide('text', text)
    
    return { text }
  }
})
</script>

 

 

 

 

childComponent.vue

<template>
  <div>{{ text }}</div>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue'

export default defineComponent({
  name: 'ChildComponent',
  setup () {
  
  	// inject로 데이터 추출
    const text = inject('text')
    
    return { text }
  }
})
</script>

 

VUE.JS 목록