[VUE + TYPESCRIPT] @Provide / @Inject로 데이터 전달

VUE.JS 목록

src/component/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <child></child>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Provide } from 'vue-property-decorator';
import Child from '@/components/Child.vue';

@Component({
    components: {
        Child,
    },
})

export default class Home extends Vue {
    @Provide('message') msg: string = 'provide / inject 예제';
}
</script>

 

src/component/Child.vue

<template>
    <div>
        {{ message }}
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject} from 'vue-property-decorator';

@Component
export default class Child extends Vue {
    @Inject() readonly message!: string;
}
</script> 

 

kr.vuejs.org/v2/api/#provide-inject

공식 문서에 공통 컴포넌트를 위해서 사용하고,

개별 컴포넌트에서는 사용을 권장하지 않습니다.

가독성이 prop보다 떨어지기 때문입니다.

 

VUE.JS 목록